Reducing the width of the bootstrap table does not seem to work properly when trying

I am currently working on a bootstrap table design that features a table with a rowspan of "2" in the right corner, creating a layout with 2 rows on one end and another rowspan of "2" on the other end, as shown in the following image: https://i.sstatic.net/eob6D.png

My issue lies in trying to adjust the width of the table containing the image in the first column. I have attempted using col-1 and colspan="1", but I have not yet found a solution. Could you provide assistance? The total width of the table containing the image should be the same as rowspan="1".

Here is the code snippet:

<tr>
    <td rowspan="2" colspan="1">
  <img src="IMAGE">
      

    </td>
    <td class="col-10">
    PRODUCT NAME
    </td>
  <td rowspan="2" colspan="1">$PRICE</td>
    
  </tr>
  <tr>
    <td>
    <span>DESCRIPCION</strong></span>
    </td>
  </tr>
htmlcssbootstrap-4html-tablebootstrap-table

Answer №1

If you want to specify a set width for an image row, you can include the width="...px" attribute within the <td width="..px"> tag.
Here is an example to illustrate this:

table {
      border-collapse: collapse;
    }
    table,
    tr,
    th,
    td {
      border: 1px solid #000;
    }

    th {
      padding: 1ex;
      background: #ccc;
    }
    td {
      padding: 1ex;
    }
    .divide td {
      border-top: 3px solid;
    }
<table>
<tr>
  <td rowspan="2" colspan="1" width="200px">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width="50px">
  </td>
  <td class="col-10">
  PRODUCT NAME
  </td>
  <td rowspan="2" colspan="1">$PRICE</td>
  </tr>
  <tr>
    <td>
    <span>DESCRIPTION</strong></span>
    </td>
  </tr>
</table>
<table>
<tr>
  <td rowspan="2" colspan="1" width="150px">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width="50px">
  </td>
  <td class="col-10">
  PRODUCT NAME
  </td>
  <td rowspan="2" colspan="1">$PRICE</td>
  </tr>
  <tr>
    <td>
    <span>DESCRIPTION</strong></span>
    </td>
  </tr>
</table>
<table>
<tr>
  <td rowspan="2" colspan="1" width="100px">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width="50px">
  </td>
  <td class="col-10">
  PRODUCT NAME
  </td>
  <td rowspan="2" colspan="1">$PRICE</td>
  </tr>
  <tr>
    <td>
    <span>DESCRIPTION</strong></span>
    </td>
  </tr>
</table>
<br>
<br>
<table>
    <tr>
        <th>header</th>
        <th>title</th>
        <th>title</th>
        <th>title</th>
        <th></th>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">white</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">gray</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>white</td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">gray</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to position divs without causing them to collapse or override existing divs

I am currently developing a demonstration in which users can select jQuery areas to create square blocks. When a user selects an area and adds a comment with color, the entire block is displayed at a specific position. This feature is working perfectly as ...

javascriptjqueryhtmlcssjquery-ui-selectable

What is the best way to utilize an onClick on a button to update a value that is being utilized in a useEffect hook?

I am looking for a way to dynamically change the content displayed in this section without navigating to another page. I have two sets of data - one displaying all blogs and the other showing only blogs authored by "mario". How can I implement a button cli ...

javascripthtmlreactjs

How can you adjust the arrow placement to be at the bottom of the full-height container just before the fold?

Is there a way to position the arrow at the bottom of the container? I'm using Bootstrap-5 and struggling with getting the right positioning attributes. The arrow keeps sticking with the other text content. Any tips or guidance on how to achieve this ...

htmlcssbootstrap-5

Updating the background image of a React app according to each component

After researching extensively and attempting various solutions, I am still struggling to make my app function correctly. My goal is to display a different background image depending on which component is being rendered on the screen. The app is built using ...

cssreactjsmaterial-uibackground-image

Steps for updating a text section beneath a carousel

I'm looking to enhance my webpage with a bootstrap carousel, which is pretty standard. However, I want the content under each slide to change dynamically, but I'm struggling to make it work. As a newbie, I could use some guidance. I've atte ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

What is the reason for simplyscroll not being able to handle this div with nested divs? EXTRA INFORMATION The scrolling functionality does not work. Clicking on the buttons doesn't trigger any scrolling. Changing the contents of the div to plain tex ...

javascriptjqueryhtmlsimplyscroll

Applying CSS text-shadow to an input field can cause the shadow to be truncated

I've encountered an issue when applying text-shadow to an input field, where the shadow appears to clip around the text. Here is the CSS code I used: @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900& ...

cssinput-fieldtext-shadow

An interesting quirk within CSS is that when a field is hidden, it can

I am currently developing a Chrome extension to modify certain text fields, but I have run into an issue. Specifically, I need to hide the "Stato" field so I implemented the following CSS code: https://i.stack.imgur.com/9blvz.png https://i.stack.imgur. ...

cssgoogle-chrome-extension

React-bootstrap's Modal is glitching and only partially appearing on the screen

I am a beginner in frontend development and I've been struggling to position the modal at the center of the screen; it keeps appearing on the right side. I am currently using "bootstrap/dist/css/bootstrap.min.css" for my CSS. Should I create a new CSS ...

htmlcssreactjs

Tips for showing a table during onfocus event?

I have created an input text field with a label for a name. When I enter a name in the text box, it displays some related names using the onfocus event. Now, my goal is to display a table under the text box with the ID or NO and NAME when a name is entered ...

jqueryhtmltwitter-bootstrap-3

Display information retrieved from database query in HTML

As someone who is new to PHP, I am determined to learn and improve my programming skills through it. Currently, I have incorporated the following PHP code into my webpage to fetch data from my database: <?php //code missing to retrieve my ...

phphtml

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet. <button type="button" [className]="'btn btn-block m-0'" kendoButton ...

cssangularresponsive-designbootstrap-5

How can one gain access to a specifically generated element?

In my task of dynamically generating multiple elements, I am facing an issue related to accessing specific ones. To illustrate this problem as simply as possible, I have provided the following code: $(document).ready(function() { var num1 = 0; v ...

javascriptjqueryhtml

Enhancing collapsible list headers in jquery mobile with checkboxes

Having trouble with a jQuery Mobile website issue. Currently working on a jQuery mobile site that includes a collapsible list (). The client request is to have a checkbox inside the header, allowing users to check items off without needing to open them. T ...

javascriptjquerycssjquery-mobilemobile

Rotating an image as it approaches the footer: a step-by-step guide

I'm trying to add a navigation arrow on my website that will rotate to point to the top when it reaches the footer. When clicked on, it should scroll back up to the top. The arrow already has a scrolling effect, but I need help figuring out how to m ...

javascripthtmlcss

What is the best way to align a container in the middle of the page without positioning the text in the center

Query 1: What is the best way to horizontally center the container div while keeping Typography aligned to the left? Expected outcome: https://i.stack.imgur.com/yKCZF.jpg Query 2: How can a component be positioned below the AppBar without relying on mar ...

cssflexboxmaterial-ui

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

The Bootstrap form fails to function properly on mobile devices

On my Bootstrap form, everything works fine when entering data on the desktop version. However, I am facing an issue with the mobile version where I cannot input any information into the fields. The fields are unresponsive and not allowing me to enter an ...

htmlformstwitter-bootstrap

Is there a way to use a less mixin or selector to adjust the position depending on the sibling

Currently, I am working on adjusting the position of multiple sibling divs depending on their order. Although they are all currently set to position: absolute, this may change. Each div is a few hundred pixels tall, but I want them to overlap in such a wa ...

htmlcssless

The vanishing act of custom fonts in Internet Explorer

This issue with a custom font embed is new to me. I have successfully used custom fonts on many client sites without any problems. One specific client has their own custom font files that are causing trouble. The application in question is embedded in an ...

cssinternet-explorercachingfont-face