CODEWITHSUNDEEP
csscolumn-widthcss-tables
Mestore
Mestore

Reputation: 165

css display:table first column too wide

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.

Upvotes: 13

Views: 19205

Answers (5)

Fortisimo
Fortisimo

Reputation: 1002

Try -> table-layout: fixed

Upvotes: 20

Steve Robillard
Steve Robillard

Reputation: 13471

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.

Upvotes: 1

Rob
Rob

Reputation: 6871

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%;
}

Upvotes: 2

Salil
Salil

Reputation: 47522

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>

Upvotes: -1

RoToRa
RoToRa

Reputation: 38431

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

Upvotes: 11

Related Questions