如何在表中使用文本溢出工作

时间：2012-10-18 08:51:22

标签： html css html5 css3

我有下表：

#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>都没有做任何事情。我想我只是接近它错了。

1 个答案:

答案 0 :(得分：3)

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

删除此规则应该有所帮助：

word-wrap: break-word;
相关问题
最新问题