Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using CSS to create table cells of a specific width with no word wrapping

In a project have been involved in I needed to render tables with columns of a specific width with only one HTML line per table row (no wrapping). I need each table cell to have a padding of 1 pixel at the top and bottom and 2 pixels at the left and right. The best way I can come up with that works cross browser is to put a div inside a td inside the table in this way:

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

I would love to be able to eliminate the need to add the extra div. I've spend many hours googling this issue but can't find an alternative.

Is there a way to do what I need without the need to add the extra div? If So, what is it?

Is there a way of getting the desired result without using tables at all?

like image 354
Stacey Richards Avatar asked Jan 06 '09 12:01

Stacey Richards


People also ask

How do I stop table cells from wrapping text?

The task is to prevent the text in a table cell from wrapping using CSS. To achieve this we use white-space property of CSS. This property forces the contents of th to display in one line. There are many property values exists to the white-space function.

How do you stop word-wrap in CSS?

If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).

How do I create a table in CSS without a tag?

How to Create Responsive Tables using CSS without <table> Tag. 1 Step 1: Create Master Div for the Table. HTML code. CSS code. <div id=“resp-table”>. </div>. 2 Step 2: Add a Table Caption. 3 Step 3: Create a Table Header Row. 4 Step 4: Add Table Header Cells. 5 Step 5: Create the Table Body. More items

Is it possible to create a table style using only CSS?

Yes. Using only CSS we can achieve this because of a special property provided. This styling is not used frequently used and hence many developers might not know about the same. We can use the display property and provide a width for all our divs to make them look like a table automatically.

What is the width and height of a table in HTML?

Table Width and Height. The width and height of a table are defined by the widthand heightproperties. The example below sets the width of the table to 100%, and the height of the <th> elements to 70px: Example.

How to make a table look like a table in CSS?

We can use the display property and provide a width for all our divs to make them look like a table automatically. How to use the ‘display’ property to represent a table? The below table gives you the relation between a ‘ table ‘ tag and the corresponding supported CSS property to represent the same element.


1 Answers

Unfortunately table elements do not respect overflow, so you will need to apply that to a child element.

edit: I may have spoken too soon, as I can create this effect in FF using max-width and I've discovered this thing which might work for IE. You learn something every day.

edit2: yeah it does work for IE7 at least but there's a serious caveat that you can't have whitespace in the text, they have to be converted to &nbsp;. I think you should probably stick with the <div> solution for sake of cleanliness and compatability.

like image 60
annakata Avatar answered Oct 17 '22 03:10

annakata