Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a table cell shrink width to fit only its contents?

I want the table to have 100% width, but only one column from it should have a free width, like:

| A | B | C                                                                  |

so the width of A and B columns should match the width of their contents, but the width of C should go on until the table ends.

Ok I could specify the width of of A and B in pixels, but the problem is that the width of the contents of these columns is not fixed, so if I set a fixed width it wouldn't match the contents perfectly :(

PS: I'm not using actual table items, but a DL list wrapped in a div. The div has display:table, dl has display:table-row, and dt/dd display:table-cell ...

like image 876
thelolcat Avatar asked Dec 29 '12 17:12

thelolcat


People also ask

How do I make a table fit the contents of a cell?

In "Table Tools" click the [Layout] tab > locate the "Cell Size" group and choose from of the following options: To fit the columns to the text (or page margins if cells are empty), click [AutoFit] > select "AutoFit Contents."

How do you reduce cell width in a table?

Change column width , and then drag the boundary until the column is the width you want. To change the width to a specific measurement, click a cell in the column that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Column Width box, and then specify the options you want.

How do you make a table cell smaller in HTML?

To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively.

How do I make my td width smaller?

Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.


1 Answers

If I understood you, you have tabular data but you want to present it in the browser using div elements (AFAIK tables and divs with display:table behaves mostly the same).

(here is a working jsfiddle: http://jsfiddle.net/roimergarcia/CWKRA/)

The markup:

<div class='theTable'>
    <div class='theRow'>
        <div class='theCell' >first</div>
        <div class='theCell' >test</div>
        <div class='theCell bigCell'>this is long</div>
    </div>
    <div class='theRow'>
        <div class='theCell'>2nd</div>
        <div class='theCell'>more test</div>
        <div class='theCell'>it is still long</div>
    </div>
</div>​

And the CSS:

.theTable{
    display:table; 
    width:95%; /* or whatever width for your table*/
}
.theRow{display:table-row}
.theCell{
    display:table-cell;
    padding: 0px 2px; /* just some padding, if needed*/
    white-space: pre; /* this will avoid line breaks*/
}
.bigCell{
    width:100%; /* this will shrink other cells */
}​

The sad part is I couldn't do this one year ago, when I really needed it -_-!

like image 82
Roimer Avatar answered Sep 27 '22 18:09

Roimer