Fixed width of table column in HTML

Question

My search results' screenshot:

Help me to get similar columns or fixed column for every content. It expands when length of song name increases.

My table code is simple:

<table id="dataTable" border="1" width="70%" cellspacing="0" cellpadding="5">
 <thead>
     <tr>
        <th><font color="green"><?php echo $MusicTitle;?></font></th>
        <th><font color="red"><?php echo $p['bit'];?></font></th>
        <th><a class="orange" href="<?php echo $p['url'];?>">Download</a></th>
     </tr>
 </thead>

You either need to specify widths and be happy with them (for example, trunc your text with ellipses), or use an image-string measurement function and pass the size to your output, which is kind of kaput because it depends on the font render, and your client might not have the same font? Stack Answer: http://stackoverflow.com/questions/1641756/how-to-determine-the-length-in-pixels-of-a-string-being-rendered-on-a-web-page — Dan H, Jan 20 '14 at 20:17
Please avoid ``. Go instead for CSS selectors (`#datatable thead th:nth-child(1) { color: green; }` or CSS classes or if not able to include either use inline styles à la `` — Volker E., Jan 20 '14 at 20:57

score 0 · Answer 1 · answered Jan 20 '14 at 20:33

Add this to your stylesheet

table
{
    table-layout:fixed;
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     white-space: pre-wrap;       /* css-3 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
     word-break: break-all;
     white-space: normal;
}

score 0 · Accepted Answer · edited May 23 '17 at 12:01

Although stackoverflow isn't the place where dreams of lazy people should come true. Well, let's say I'm doing this as an exception:

First of all, your HTML table structure seems semantically wrong.
<th> stands for HTML Table Header Cell Element, but your contents seem to be semantically table cells that contain data, also known as <td>.
Second, you're mixing CSS and obsolete presentation tags and attributes like cellpadding or font. You should avoid that.

Here's my cleaned up approach on your structure:

HTML:

<table id="dataTable" cellspacing="0">
 <thead>
     <tr>
        <th>Music Title</th>
        <th>Bitrate/File Size</th>
        <th>Download Link</th>
     </tr>
 </thead>
 <tbody>
     <tr>
        <td><?php echo $MusicTitle;?></td>
        <td><?php echo $p['bit'];?></td>
        <td><a href="<?php echo $p['url'];?>">Download</a></td>
     </tr>
 </tbody>

CSS:

#dataTable { /* cellspacing is still necessary on `<table>` */
    width: 70%;
    border: 1px solid #000;
    border-collapse: collapse;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto; 
    table-layout: fixed;
    white-space: pre;
    white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
    white-space:   -o-pre-wrap; /* Opera 7 */
    white-space:     -pre-wrap; /* Opera 4-6 */
    white-space:      pre-wrap; /* CSS 3 */
    white-space: pre\9; /* IE7+ */
    word-wrap: break-word; /* IE 5.5-7 */
    word-break: break-all; /* Webkit */
    white-space: normal;
}

#dataTable th {
    padding: 5px;
}

#dataTable th:nth-child(1) {
    color: #0F0;
}
#dataTable th:nth-child(2) {
    color: #F00;
}

#dataTable td {
    border: 1px solid #000;
    padding: 5px;
    font-weight: bold;
    text-align: center;
}
#dataTable td:first-child {
    text-align: left;
}

See also http://jsfiddle.net/Volker_E/QL4cX/1/

Fixed width of table column in HTML

2 Answers2