make the width of the table cell as compact as can be

I have a table that spans 100% of the width, and I'm wondering how I can set the width of columns 2 and 3 to be as small as possible without causing the content to break.

I tried adding a specific width style, but I know this is not recommended for responsive design. Is there a CSS rule that would help achieve this?

<table style="width: 100%;" >
    <tbody>
        <tr>
            <th>Name : long width</th>
            <th>Value</th>
            <th>ID</th>
        </tr>
        <tr>
            <td>This is a very long row td</td>
            <td>Yes</td>
            <td>12</td>
        </tr>
        <tr>
            <td>This is a very long row td</td>
            <td>Ni</td>
            <td>13</td>
        </tr>
    </tbody>
</table>

<p>Ideally, I'd like something like this (but without specifying exact widths) :</p>


<table style="width: 100%;" >
    <tbody>
        <tr>
            <th>Name : long width</th>
            <th style="width:40px">Value</th>
            <th style="width:40px">ID</th>
        </tr>
        <tr>
            <td>This is a very long row td</td>
            <td>Yes</td>
            <td>12</td>
        </tr>
        <tr>
            <td>This is a very long row td</td>
            <td>Ni</td>
           <td>13</td>
       </tr>
   </tbody>
</table>
Thank you !

htmlcss

Answer №1

To ensure table cells expand to fit content while setting a width, simply set the width to 0 and prevent breaking by applying the white-space:nowrap; CSS property. Utilize the nth-child() selectors to apply this styling only to the necessary columns rather than adding inline styles to each cell. It's recommended to style tables using CSS for easier problem-solving during debugging. Here's an example:

table {
  width:100%;
}

table td:last-child, table td:nth-last-child(2)   {
  width:0px;
  white-space:nowrap;
}
<table>
    <tbody>
        <tr>
            <th>Name : long width</th>
            <th>Value</th>
            <th>ID</th>
        </tr>
        <tr>
            <td>This is a very long row td</td>
            <td>Yes and No</td>
            <td>12</td>
        </tr>
        <tr>
            <td>This is a very long row td</td>
            <td>Ni</td>
            <td>13</td>
        </tr>
    </tbody>
</table>

For more information on CSS selectors and the white-space property, visit these resources.

Answer №2

th {
  width: 100%;
}
<table style="width: 100%;" >
    <tbody>
        <tr>
            <th>Name : long width</th>
            <th>Value</th>
            <th>ID</th>
        </tr>
        <tr>
            <td>This table contains lengthy data</td>
            <td>Yes</td>
            <td>12</td>
        </tr>
        <tr>
            <td>This row also includes detailed information</td>
            <td>Ni</td>
            <td>13</td>
        </tr>
    </tbody>
</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

Transform Table header orientation to vertical

I am struggling with a table structure similar to this <table> <thead> <tr> <th>Numbers</th> <th>Alphabet</th> </tr> </thead> <tbody> & ...

htmlcss

What is the best method for modifying an XML document without altering its associated XSL stylesheet?

I am working with XML data retrieved from a URL: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="/style.xsl"?> ....etc... To display the data in HTML format, I added the second line referencing the style.xsl file ...

cssxmlxslt

Encountering problems with Node Sass versions while trying to import custom scss files into app.js

I've encountered several articles on stack that didn't quite solve my issues. The problem arose when I tried to import a custom SCSS file into my React app.js to override bootstrap theme colors. Here are the style imports in my App.js: import &q ...

cssnode.jsreactjssassnode-sass

How do I resolve the jQuery error "unable to find function url.indexOf" when working with Vide?

I had previously asked a question regarding the use of the Vide plugin for playing background videos on my website, which can be found here. However, I am now encountering an error that is puzzling me: https://i.stack.imgur.com/UDFuU.png I am unsure abo ...

javascriptjqueryhtmlvideo

Why does the alt text show up when the gif image fails to display?

While transitioning between pages, I am using a GIF image as a 'loader'. However, during the first 2 or 3 navigations, I can see the image, but for the rest of the transitions, instead of the image, I can only see the "alt" text that I have provi ...

htmlcssimagegifloader

I just obtained the height measurement of a dynamic table - now I must transfer this height value to a different element

Recently, I encountered a situation where I needed to get the height of a dynamic table using code like this: var table = document.getElementById("test"); document.write(table.offsetHeight); However, the challenge arose when I realized that I also needed ...

javascripthtmlcss

Is there a way to assign the scroll event context to `document.body` instead of `window`?

Discovery As I delved into the intricacies of web development, I stumbled upon a curious observation. In a particular MDN page, I noticed that the left and right sidebars had their scrollbars contained within themselves. However, the content block's ...

javascripthtmlscrolldom-events

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

htmlcssgoogle-mapsiframe

Print a table in PHP with a horizontal layout

I've been at this for hours and can't seem to figure it out. Hopefully someone out there can lend a hand. The code below is echoing the result in a table vertically, but I really need the cells to be next to each other horizontally. Any advice o ...

phpmysqlcss

Title menu that can be both dragged and edited

I am currently working on developing an HTML user interface that enables my users to rearrange or organize the menu items or utilities according to their preference, much like the HOME screens on Android or iOS devices. I am seeking advice on how I can s ...

jqueryhtmlcss

Utilizing Bootstrap to arrange table cells in a shifted manner

I'm new to utilizing bootstrap in web development. I've been exploring various examples of bootstrap templates that include tables, and I noticed that when I resize my browser window, the table adjusts accordingly. Now, I'm curious to know ...

javascriptjquerycsstwitter-bootstrap

Attempting to migrate a HTML website to WordPress has proven to be a challenge as only the content is visible, with the CSS failing to load properly

I'm looking to convert an HTML site into a WordPress site while keeping the same theme intact. Even after adding 'wp_enqueue_style' to the functions.php file, the CSS file is not being recognized by WordPress. functions.php <?php f ...

htmlcsswordpress

Incorporate CSS styling within a PHP document

Many individuals are aware that HTML can be embedded within a PHP file. However, can CSS also be included in a PHP file and accessed using <link rel="stylesheet" type="text/css" href="mystyle.php" /> to make it act as a CSS file? While it is possib ...

phphtmlcss

Generating numerous div elements with jQuery's zIndex property

While attempting to create a function that runs on the $(document).ready() event and is supposed to generate a new div, I encountered an issue. Whenever I try to create another div with the same DOM and Class attributes but in a different position, a probl ...

javascriptjqueryhtmlcss

designing the border at the bottom of the existing menu selection

I am trying to enhance the look of my current-menu-item div by adding a border at the bottom. It seems simple enough to achieve this by simply including the border in the div. However, I'm facing an issue with the width and position of the border. Ide ...

phpwordpresscss

Having difficulty changing the value of a Select element in AngularJS

Struggling to update the select value from AngularJs. Check out my code below: <select ng-model="family.grade" > <option ng-repeat="option in options" value='{{option.id}}'>{{option.text}}</option> </s ...

javascripthtmlangularjs

Automatically close an element when you click on a different element

Hello everyone! I need some help again. I'm working on a script that displays an overlay when a menu item is clicked. Within this menu, there is a modal contact form with a close icon or anchor that should appear when clicked. My goal is to have the o ...

javascriptjqueryhtmlcss

What is the best way to horizontally center an image in Bootstrap 4 while having a fixed-top navbar and preventing vertical scrollbars?

I am struggling to achieve the desired outcome, which is depicted in this image: https://i.sstatic.net/i6X0j.jpg Specific requirements for this project include: The image must be responsive A fixed-top navbar should remain visible No vertical scrolling ...

cssbootstrap-4

How to use CSS to insert a line break after the fourth child in a

At this moment, the example displays an unordered list containing 8 list items. I am curious if there is a way to add a line break after the 4th li item using only CSS (no HTML or JavaScript). Perhaps something like: ul li:nth-child(4n):after { conte ...

htmlcssdomhtml-lists

Extracting an ID value from a select box in Vue.js

I'm attempting to extract the value of idTipoExame from the following JSON: { "idTipoExame": "11", "mnemonico": "AUR", "exame": "ACIDO URICO" }, { "idTipoExame": "24&qu ...

javascripthtmljsonvue.js