css display:table first column too wide

Question

I have a css table setup like this:

<div class='table'>
 <div>
  <span>name</span>
  <span>details</span>
 </div>
</div>

The css for the table is:

.table{
 display:table;
 width:100%;
}
.table div{
 text-align:right;
 display:table-row;
 border-collapse: separate;
 border-spacing: 0px;
}
.table div span:first-child {
 text-align:right;
}
.table div span {
 vertical-align:top;
 text-align:left;
 display:table-cell;
 padding:2px 10px;
}

As it stands the two columns are split evenly between the space occupied by the width of the table. I'm trying to get the first column only to be as wide as is needed by the text occupying it's cells

The table is an unknown width, as are the columns/cells.

`border-collapse` and `border-spacing` only apply to tables to table rows. You should move them to the `.table` rule. NB: Any special reason you are not actually using a table? — RoToRa, Apr 27 '10 at 10:03
Not using a html table because the code exists all over the site and is generated through some ajax. I just kept it simple because the ajax and php is unrelated to the issue. — Mestore, Apr 27 '10 at 10:10
But surely generating nested divs and spans is no different to generating a table with trs and tds? How is that (and dealing with these CSS table issues) easier than just outputting a table via AJAX? — Simon, Apr 27 '10 at 10:14
It's mostly for 'theme' reasons, the site I'm working on has user customizable themes. tables trs and tds would require an update on the themes code which is quite extensive. Plus (although I could be mistaken, css isn't something I'm very good with yet) it might mess up the inheritance of the nested divs and spans. At this point it just seems easier to do it this way. — Mestore, Apr 27 '10 at 10:31

score 20 · Answer 1 · answered Jul 20 '10 at 09:37

20

Try -> table-layout: fixed

answered Jul 20 '10 at 09:37

Fortisimo

1,012
2
11
26

You legend. This fixed the issue I was having with cells breaking out of containers. – Dwayne Charrington Mar 21 '13 at 07:51
1

Where are you putting this? – evolutionxbox Nov 25 '15 at 12:20
This goes in the .table and it makes all table columns an a consistent width with the other columns. – efreed Nov 07 '16 at 17:36

score 11 · Accepted Answer · answered Apr 27 '10 at 10:01

11

Just give it a any small width like 1px. Table cells always expands to the smallest possible size to fit its content.

answered Apr 27 '10 at 10:01

RoToRa

37,635
12
69
105

This has been tried already, it makes the width only as wide as the longest word. If the cell has 3-5 words the browser will wrap as much as possible to keep the cell as narrow as possible. – Mestore Apr 27 '10 at 10:07
1

try adding whitespace="nowrap" – Steve Robillard Apr 27 '10 at 10:09
3

Then you need to also add `white-space: nowrap` to stop wrapping. – RoToRa Apr 27 '10 at 10:10
Didn't know about white-space: nowrap; this fixed the problem. Thanks – Mestore Apr 27 '10 at 10:21
1

I had the same problem with just one column in the middle of my table, but thanks to the advice here problem solved. < td style='width:1px;white-space:nowrap' > – May 20 '10 at 16:31

score 2 · Answer 3 · answered Apr 27 '10 at 10:04

2

You could use the first-child selector to find the first div within the table and give it a seperate with.

.table div:first-child
{
    width:30%;
}

answered Apr 27 '10 at 10:04

Rob

6,731
12
52
90

score 1 · Answer 4 · answered Apr 27 '10 at 10:08

1

I don't know that you can get it to be the size of the text if that differs by row but you can try setting a width ="auto" or a percentage width for the columns.

answered Apr 27 '10 at 10:08

Steve Robillard

13,445
3
36
32

score -1 · Answer 5 · answered Apr 27 '10 at 10:04

-1

you should change your class name "table" to some other. "table" suggest that it is class of some table than div.

try following

<div class='table'>
 <div>
  <span style="width:30%">name</span>
  <span>details</span>
 </div>
</div>

answered Apr 27 '10 at 10:04

Salil

46,566
21
122
156

css display:table first column too wide

5 Answers5

Linked