如何在 table 中设置列宽以便内容根据宽度调整？

Question

这是table

<div class="container">
  <table class="table table-striped" id="sms_data">
    <thead>
      <tr>
        <th class="message">Message</th>
        <th>DELIVERED</th>
        <th>UNDELIVERED</th>
        <th>EXPIRED</th>
        <th>REJECTED</th>
        <th>TOTAL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <!-- 160 character long message-->
        </td>
        <td> Number</td>
        <td> Number</td>
        <td> Number</td>
        <td> Number</td>
        <td> Number Total</td>
      </tr>
    </tbody>
  </table>
</div>

我希望“消息”列的宽度约为 20%。所以我尝试了这个

th.message {
    width: 20%;
}

但是有了这个，内容就重叠在其他栏目上了…… 我希望 Message 栏中的内容看起来像这样

    Message with 160 
character around

而不是这个

    Message of 160 characters long

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap 用于设置所有内容的样式。请帮我怎么做？感谢任何帮助..

Answer 1

<style>
    .table{
        table-layout:fixed;
    }
    td.message{
        overflow: hidden;
    } 
    td, th{
        white-space: initial !important;
    }
</style>

这解决了我的问题

如何在 table 中设置列宽以便内容根据宽度调整？

how to set column width in table so the content adjust according to the width?

html

html-table

如何在 table 中设置列​​宽以便内容根据宽度调整？

how to set column width in table so the content adjust according to the width?

html

html-table

如何在 table 中设置列宽以便内容根据宽度调整？