How can I design table with equivalent cells length

I have a table that its content come from a sql database , for those content that are more that 10 characters table cells length will be larger than usual size requirement and table turn to bad looking style . How can I have one table with equivalent cells size ? Please introduce me one simple tutorial .

There are a couple of simple techniques, but they tend to break in different ways.

The most common technique is to set the table cells overflow property:

#tableData td {
   overflow: hidden;

But then the text just abruptly ends at the edge of the cell.

The most effective is to use ellipses (the ... characters) at the end of the content that's too large for the table cell. Here's a tutorial on [CSS String Truncation with Ellipsis](

Tables normally adapt to their contents. If you want more control over column widths, you need to use the fixed table layout algorithm. You still won’t get 100% control, but you get a lot more than with the automatic layout algorithm.

For this to work, you need to specify the width of the table itself. You should also specify the column widths, or the widths of the cells in the first row of the table. And don’t omit any cells in the first row if you use this algorithm!

<table class="accounts">
  <col class="account-number">
  <col class="account-name">
  <col class="balance">
    <tr><th>Account</th> <th>Name</th> <th>Balance</th></tr>
    <tr><td>0123-4567</td> <td>Purchases</td> <td>&#8364; 82400</td></tr>
    <tr><td>0246-9753</td> <td>Investments</td> <td>&#8364; 119561</td></tr>
table.accounts {

col.account-number {

col.balance {

Here I’ve omitted the width declarations for the middle column (account-name), but since the table width and the widths of the other two columns are specified, the browser can easily compute how much is left to allocate to the account name column.