Question

我使用bootstrap创建了一个表。我想添加文字限制。下面是html。该表及其局限性在chrome和firefox中运行良好，但现在在IE8 +中工作。

<table class="table table-striped table-condensed table-bordered dashboard-table">
  <thead style="background-color: #F8DAC2; border-bottom: 3px solid #CA6A15; font-size: 12px">
    <tr>
      <th>Entity</th>
      <th>Board Meeting/Other committees of the board</th>
      <th>Date</th>
      <th>Exceptional Items</th>
      <th>Issues</th>
      <th>Remarks</th>
      <th>Respective Company's CEO/CFO's comment thereto</th>
      <th>Approve/Reject Remarks</th>

    </tr>
  </thead>
  <tbody class="text-justify"  style="font-size: 12px; font-weight: bold; color: #000;">
    <tr>
      <th scope="row"><a href="#"> ABNL</a></th>
      <td>Mark</td>
      <td>2 Jul 2015</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td><i class="fa fa-fw fa-check-circle-o" style="font-size: 20px; color: #007401"></i> Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
    </tr>
    <tr>
       <th scope="row"><a href="#"> ABFNL</a></th>
      <td>Mark</td>
      <td>2 Jul 2015</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
    </tr>
    <tr>
      <th scope="row"><a href="#"> ABFNL</a></th>
      <td>Mark</td>
      <td>2 Jul 2015</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
    </tr>
  </tbody>
</table>

和我所做的同样的css类。我没有改变的原始引导。

.dashboard-table tbody tr td{
    max-width: 200px ;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
}

Answer 1

IE不起作用，我发现答案或其工作我不知道，但你需要在下面添加div标签

 <tr>
          <td scope="row"><a href="#"> ABNL </a></td>
          <td>Mark</td>
          <td style="width:70px">2 Jul 2015</td>
          <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
          <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
          <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
          <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>

          <td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i><div style="width: 85%; float: right">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</div></td>
        </tr>

 <tr>

文本溢出在IE8 +中不适用于表列

1 个答案: