html - 如何让文本溢出在表格中工作

Question

我有下表：

#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>

它用于<colgroup>设置宽度并且效果很好，直到我得到像示例中那样有点太长的数据。

问题还不错，但能够以text-overflow某种方式（如果可能）应用于学生姓名等列会很好。

我已经尝试将其设置为col样式，但没有任何乐趣。也将它应用于每个<td>都不会做任何事情。我想我只是在接近它是错误的。

score 3 · Accepted Answer

由于您让内容中断，因此单元格无需使用文本溢出。

删除此规则应该有助于：

word-wrap: break-word;

html - 如何让文本溢出在表格中工作

1 回答 1

Related

Reference