Html table 内容超出显示省略号

内容超出显示省略号:

<html>
<style>
    table {
        table-layout: fixed;
        width: 100%;
    }
    table, th, td {
        border: 1px solid #999;
        padding: 5px;
        text-align: left;
    }
    td.desc {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
style>

<table>
  <thead>
    <tr>
      <th class="desc">项目名th>
      <th width='20%' class="desc">Urlth>
      <th width='40%' class="desc">描述th>
      <th>语言th>
      <th class="number desc">Starsth>
    tr>
  thead>
  <tbody>
  {% for source in sources %}
    <tr>
      <td class="desc" title="{{ source.name }}">{{ source.name }}td>
      <td class="desc" title="{{ source.url }}">{{ source.url }}td>
      <td class="desc" title="{{ source.description }}">{{ source.description }}td>
      <td class="desc" title="{{ source.primary_lang }}">{{ source.primary_lang }}td>
      <td>{{ source.stars }}td>
    
  {% endfor %}
  tbody>
table>
html>
 
View Code

注意:

1、 table 设置:

       table-layout:fixed; /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */

       table的width 也要设置;

2、th, td 的设置:

      overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */

      text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

3、这些样式必须在 th, td 都写才有效果,并且th, td 还要定义属性width。

 

另外,省略的文字如果想展示,

可以给td添加title属性,这样鼠标移动到该元素会自动显示所有的文字。

你可能感兴趣的:(Html table 内容超出显示省略号)