I have the following table: #content table { width: 800px; table-layout: fixed; } #content

Question

0

Asked: June 13, 20262026-06-13T08:03:47+00:00 2026-06-13T08:03:47+00:00

I have the following table: #content table { width: 800px; table-layout: fixed; } #content

0

I have the following table:

#content table
{
    width: 800px;
    table-layout: fixed;
}

#content table thead
{
    font-weight: bold;
}

#content table thead td
{
    padding: 0;
    vertical-align: bottom;
    cursor: pointer;
    border-bottom: 2px solid #427AA8;
    padding-right: 5px;
}

#content table thead td.sorttable_nosort 
{
    cursor: default;
}

#content table thead td span
{
    display: inline-block;
}

#content table:not(.widthSet) thead td:last-child span
{
    width: 100%;
}

#content table tbody
{
    font-size: 90%;
}

#content table tbody tr
{
    border-top: 1px solid #AAA;
    vertical-align: middle;
}

#content table tbody tr .status
{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #777;
    margin-right: 5px;
    line-height: 2em;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}

.ie7_html #content table tbody tr .state 
{
    *display:inline;
    *position: static;
    zoom: 1;
}

#content table tbody tr .generating, #content table tbody tr .info
{
    background-color: #3399FF;
}

#content table tbody tr .templatemoderation, #content table tbody tr .moderating
{
    background-color: #0044FF;
}

#content table tbody tr .contentmoderation
{
    background-color: #FF9900;
}

#content table tbody tr .pending, #content table tbody tr .warn, #content table tbody tr .uploaded
{
    background-color: #FF5500;
}

#content table tbody tr .printing
{
    background-color: #FFFF00;
}

#content table tbody tr .failed, #content table tbody tr .rejected, #content table tbody tr .error
{
    background-color: #DD0000;
}

#content table tbody tr .printed, #content table tbody tr .accepted, #content table tbody tr .processed
{
    background-color: #00AA00;
}

#content table tbody tr .deleted
{
    background-color: #404040;
}

#content table tbody tr .archived
{
    background-color: #CCCCCC;
}

#content table tbody tr:first-child
{
    border: none;
}

#content table tbody tr:nth-child(even)
{
    background: #DDD;
}

#content table tbody tr.selected, #content table tbody tr.selectable:hover
{
    background-color: #FFFFDD;
    cursor: pointer;
}

#content table tbody td
{
    padding: 5px;
    vertical-align: top;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3em;
}

#content table tbody td a 
{
    color: #38688F;
    margin-bottom: 3px !important;
}

#content table tbody td a:hover
{
    color: #729CBE;
    text-decoration: underline;
}

#content table tbody td pre 
{
    overflow: auto;
    max-height: 200px;
    background-color: #EEE;
    border: 1px solid #AAA;
    padding: 3px;
}

#content table tbody td input[type="checkbox"] 
{
    position: relative;
    top: 1px;
}

#content table tbody td .tablebtn 
{
    font-size: 90%;
    margin: 0;
    padding: 0 8px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
}

<html>
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org">

  <title></title>
</head>

<body id="content">
  <table id="downloads" class="sortable">
    <colgroup>
      <col span="1" style="width: 28px;">
      <col span="1">
      <col span="1" style="width: 85px;">
      <col span="1" style="width: 110px;">
      <col span="1" style="width: 110px;">
      <col span="1">
      <col span="1" style="width: 110px;">
      <col span="1" style="width: 110px;">
      <col span="1" style="width: 78px;">
    </colgroup>

    <thead>
      <tr>
        <td class="sorttable_nosort"><span><input title="Select All" type="checkbox" id=
        "tableSelectAll" style="margin-left: 5px; display: none;">&nbsp;</span></td>

        <td><span title="Click to Sort">Student Name</span></td>

        <td><span title="Click to Sort">Student Number</span></td>

        <td><span title="Click to Sort">Type</span></td>

        <td><span title="Click to Sort">Qualification</span></td>

        <td><span title="Click to Sort">Centre</span></td>

        <td><span title="Click to Sort">PO Number</span></td>

        <td><span title="Click to Sort">Print Status</span></td>

        <td class="sorttable_nosort"><span>&nbsp;</span></td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><input type="checkbox" name="downloads" value=
        "097a9836-ab93-4844-b971-a0ed0120d7df"></td>

        <td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
        MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>

        <td>EFS1774</td>

        <td>Full Certificate</td>

        <td>8345-17</td>

        <td>Some company name</td>

        <td>4684546513</td>

        <td>
          <div class="status pending">
            &nbsp;
          </div>Pending
        </td>

        <td><a class="button gradient tablebtn">Preview</a></td>
      </tr>

      <tr>
        <td><input type="checkbox" name="downloads" value=
        "c7d07d05-cfe9-4e81-984c-a0ed0120d7fb"></td>

        <td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
        MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>

        <td>EFS1774</td>

        <td>Full Certificate</td>

        <td>8274-21</td>

        <td>Some company name</td>

        <td>4684546513</td>

        <td>
          <div class="status pending">
            &nbsp;
          </div>Pending
        </td>

        <td><a class="button gradient tablebtn">Preview</a></td>
      </tr>

      <tr>
        <td><input type="checkbox" name="downloads" value=
        "4810ac9f-20f5-4f39-af83-a0ed0120d817"></td>

        <td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
        MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>

        <td>EFS1774</td>

        <td>CUC</td>

        <td>8274-20</td>

        <td>Some company name</td>

        <td>4684546513</td>

        <td>
          <div class="status pending">
            &nbsp;
          </div>Pending
        </td>

        <td><a class="button gradient tablebtn">Preview</a></td>
      </tr>

      <tr>
        <td><input type="checkbox" name="downloads" value=
        "9d8d8acc-4f6b-446a-aa6b-a0ed0120d838"></td>

        <td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
        MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>

        <td>EFS1774</td>

        <td>CUC</td>

        <td>8287-30</td>

        <td>Some company name</td>

        <td>4684546513</td>

        <td>
          <div class="status pending">
            &nbsp;
          </div>Pending
        </td>

        <td><a class="button gradient tablebtn">Preview</a></td>
      </tr>

      <tr>
        <td><input type="checkbox" name="downloads" value=
        "d0224b8b-bbff-4d62-a901-a0ed0120d861"></td>

        <td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
        MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>

        <td>EFS1774</td>

        <td>CUC</td>

        <td>8351-50</td>

        <td>Some company name</td>

        <td>4684546513</td>

        <td>
          <div class="status pending">
            &nbsp;
          </div>Pending
        </td>

        <td><a class="button gradient tablebtn">Preview</a></td>
      </tr>

      <tr>
        <td><input type="checkbox" name="downloads" value=
        "cfe6080a-f0ee-434c-ac14-a0ed0120d8cb"></td>

        <td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
        MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>

        <td>EFS1774</td>

        <td>Full Certificate</td>

        <td>8287-35</td>

        <td>Some company name</td>

        <td>4684546513</td>

        <td>
          <div class="status pending">
            &nbsp;
          </div>Pending
        </td>

        <td><a class="button gradient tablebtn">Preview</a></td>
      </tr>

      <tr>
        <td><input type="checkbox" name="downloads" value=
        "c7b2ff75-0c01-40ed-adaf-a0ed0120d8dd"></td>

        <td>MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW
        MWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMWMW</td>

        <td>EFS1774</td>

        <td>NCR</td>

        <td></td>

        <td>Some company name</td>

        <td>4684546513</td>

        <td>
          <div class="status pending">
            &nbsp;
          </div>Pending
        </td>

        <td><a class="button gradient tablebtn">Preview</a></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

It uses <colgroup> to set the widths and works great until I get data that is a little too long like in the example.

The problem isn’t too bad but it’d be nice to be able to apply text-overflow somehow (if possible) to columns like student name.

I’ve tried setting it in the col style, but no joy. Also applying it to every <td> doesn’t do anything. I figure I’m just approaching it wrong though.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-13T08:03:48+00:00

Editorial Team

2026-06-13T08:03:48+00:00Added an answer on June 13, 2026 at 8:03 am

Since you let the content break, there is no need for the cells to use the text-overflow.

Removing this rule should help:

word-wrap: break-word;

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have the following table: #content table { width: 800px; table-layout: fixed; } #content

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply