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>