CODEWITHSUNDEEP
csshtml-table
Evanss
Evanss

Reputation: 23213

Stop td making other tds above and below same width

How can I stop a td with lots of text making the td above it the same length?

In this example the outline for the cell containing '1' shows its as wide as the cell containing 'long text here'. What I want is for the cell containing '1' to only be as wide as it needs to be to fit the text it contains.

Can this be done with CSS?

http://jsfiddle.net/r7yXD/1/

<table>
 <tr> 
  <td>1</tRund>
  <td>2</td>
 </tr>
 <tr> 
  <td>long text here</td>
  <td>.</td>
 </tr>
</table>


td {
border: 1px solid red;
}​

So looking at the image below, the first example is what happens and I understand why, but can I make the 2nd option happen instead with CSS?

​enter image description here

Upvotes: 1

Views: 701

Answers (3)

insertusernamehere
insertusernamehere

Reputation: 23610

As stated in the comments this is not possible using a <table>-element. You can read more about it here at w3.org: "17.5 Visual layout of table contents".

It says:

The visual layout of these boxes is governed by a rectangular, irregular grid of rows and columns. Each box occupies a whole number of grid cells, determined according to the following rules.

And interesting for your case is from rule number 5:

[…] Each cell is thus a rectangular box, one or more grid cells wide and high. […]

Upvotes: 0

Mike Hewitt
Mike Hewitt

Reputation: 712

Have you tried something like this

<style type="text/css">
td {
border: 1px solid red;
}​
</style>

<table>
 <tr> 
  <td>1</td>
  <td colspan="2">2</td>
 </tr>
 <tr> 
  <td colspan="2">long text here</td>
  <td>.</td>
 </tr>
</table>

Upvotes: 1

Damien Overeem
Damien Overeem

Reputation: 4529

You can't. Its the nature of a table to make the td's the same width.

You could however add additional td's and use colspan="2", but to be honest, if you need to do such a thing, especially for texts, you probably shouln't be using tables.

Upvotes: 1

Related Questions