CSS Table Layout

Question

I have an HTML table with 3 columns and amount of text in each column is variable. I would like to set some rules on the layout of the table but Im not sure how to do that in CSS.

Title   | Author | Publisher

The default ratio is 50%, 25%, 25% for each column. The goal is to keep everything on a single line if possible. The author and publisher columns have a higher priority to be single lined that the title column.

UPDATE: The problem is when the amount of text exceeds the width of a single line.

Answer 1

You need to change the percentages to defined widths(px). Define the width of the table, as well as give each <TD> it's own width definition that together equal the width of the table. Best way would be to create a CSS class for both, and just assign the class to each element. Something like this, very general obviously.

.table{
  width:500px;
}

.tablecell_1{
  width:200px;
}

.tablecell_2{
  width:200px;
}

.tablecell_3{
  width:100px;
}

<table class="table">
  <tr>
    <td class="tablecell_1">
    </td>
    <td class="tablecell_2">
    </td>
    <td class="tablecell_3">
    </td>
  </tr>
</table>

Answer 2

You can create a class for each of the columns.

<th class="title">Title</th>
<th class="author">Author</th>
<th class="publisher">Publisher</th>

And make css specific for each one.

.title{
}

.author{
}

.publisher{
}

Answer 3

Define a width for the table and then add a class on <td> tags with `width:auto;

.table{
  width:900px;
}

.cell{
  width:auto;
}

And here your table

<table class="table">
  <tr>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
  </tr>
</table>

Let me now if this is what you wish