表格单元格不符合固定表格中的最小宽度和最大宽度

时间:2017-10-29 06:41:59

标签: css html5 twitter-bootstrap html-table

我有一张固定布局的桌子。在我的应用程序中,我需要 td 始终具有相同的宽度,这是不会发生的。这些 tds 是在实际应用程序中动态创建的。我在jsfiddle http://jsfiddle.net/alowsarwar/1qr6og6L/中创建了一个存根。

HTML

<table class="table table-bordered responsive-qtable">
  <thead>
    <tr>
      <th style="min-width: 300px; max-width: 300px;">
       th1
      </th>
      <th style="min-width: 300px; max-width: 300px;">
       th2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="qtable-cell" style="min-width: 300px; max-width: 300px; display: table-cell;">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </td>
      <td class="qtable-cell" style="min-width: 300px; max-width: 300px; display: table-cell;">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </td>

    </tr>
    <tr>
      <td class="qtable-cell" style="min-width: 300px; max-width: 300px; display: table-cell;">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

      </td>
      <td class="qtable-cell" style="min-width: 300px; max-width: 300px; display: table-cell;">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </td>

    </tr>

  </tbody>
</table>

CSS

.responsive-qtable {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 15px;
    overflow-x: auto;
    overflow-y: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #DDD;
}

td{
   border: 1px solid #DDD;
}

0 个答案:

没有答案