html - 如何让表格中的文字自动换行？

Question

设计了带有边框的响应式表格。问题是 wraptexting，即使在 css 中包含 th.nowrap 时，数据重叠并且当我查看移动 View 时会出现两条水平线。有标题常量和数据滚动方法。甚至包括 nowrap 文本，但文本重叠。

table {
  width: 100%;
  white-space: nowrap;
}

thead,
tbody,
tr,
td,
th {
  display: block;
}

tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
  white-space: nowrap;
}

thead th {
  height: 40px;
  white-space: nowrap;
  /*text-align: left;*/
}

tbody {
  height: 40px;
  overflow-y: auto;
  white-space: nowrap;
}

thead {
  /* fallback */
}

tbody td,
thead th {
  width: 19.2%;
  float: left;
  white-space: nowrap;
}

HTML:
<div class="row">
  <div class="panel panel-default">
    <!-- /.panel-heading -->
    <div class="panel-body pn">
      <div style="overflow-x:auto;">
        <br>
        <div class="table-responsive">
          <table class="table table-bordered mbn">
            <div class="panel-heading">
              <span class="panel-title">
								<span class="fa fa-table"></span>
              <font color="blue">Se</font>
              </span>
            </div>
            <thead>
              <tr>
                <th style="width:7.8%;white-space:nowrap;">
                  <font color="grey">Enq</font>
                </th>
                <th style="width:7.8%;white-space:nowrap;" nowrap="nowrap">
                  <font color="grey">Da</font>
                </th>
                <th style="width:9.9%;white-space:nowrap;">
                  <font color="grey">Bu</font>
                </th>
                <th style="width:9.9%;white-space:nowrap;">
                  <font color="grey">Prop</font>
                </th>
                <th style="width:17.9%;white-space:nowrap;">
                  <font color="grey">Pr</font>
                </th>
                <th style="width:9.8%;white-space:nowrap;">
                  <font color="grey">District</font>
                </th>
                <th style="width:9.9%;white-space:nowrap;">
                  <font color="grey">City</font>
                </th>
                <th style="width:9.8%;white-space:nowrap;">
                  <font color="grey">Bedrooms</font>
                </th>
                <th style="width:7.9%;white-space:nowrap;">
                  <font color="grey">Details</font>
                </th>
                <th style="width:7.8%;white-space:nowrap;">
                  <font color="grey">Update</font>
                </th>
              </tr>
            </thead>
            <tr>
              <td style="width:8%;white-space:nowrap;"></td>
              <td style="width:8%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:18%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:8%;white-space:nowrap;"><a>Det </a></td>
              <td style="width:8%;white-space:nowrap;"><a> ed </a></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

试试这个

white-space: normal;
      word-wrap: break-word;

table {
  width: 100%;
  white-space: nowrap;
}

thead,
tbody,
tr,
td,
th {
  display: block;
}

tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
  white-space: nowrap;
}

thead th {
  height: 40px;
  white-space: normal;
  word-wrap: break-word;
  /*text-align: left;*/
}

tbody {
  height: 40px;
  overflow-y: auto;
}

thead {
  /* fallback */
}

tbody td,
thead th {
  width: 19.2%;
  float: left;
}

HTML:
<div class="row">
  <div class="panel panel-default">
    <!-- /.panel-heading -->
    <div class="panel-body pn">
      <div style="overflow-x:auto;">
        <br>
        <div class="table-responsive">
          <table class="table table-bordered mbn">
            <div class="panel-heading">
              <span class="panel-title">
								<span class="fa fa-table"></span>
              <font color="blue">Se</font>
              </span>
            </div>
            <thead>
              <tr>
                <th style="width:7.8%;">
                  <font color="grey">Enq</font>
                </th>
                <th style="width:7.8%;" nowrap="nowrap">
                  <font color="grey">Da</font>
                </th>
                <th style="width:9.9%;">
                  <font color="grey">Bu</font>
                </th>
                <th style="width:9.9%;">
                  <font color="grey">Prop</font>
                </th>
                <th style="width:17.9%;">
                  <font color="grey">Pr</font>
                </th>
                <th style="width:9.8%;">
                  <font color="grey">District</font>
                </th>
                <th style="width:9.9%;">
                  <font color="grey">City</font>
                </th>
                <th style="width:9.8%;">
                  <font color="grey">Bedrooms</font>
                </th>
                <th style="width:7.9%;">
                  <font color="grey">Details</font>
                </th>
                <th style="width:7.8%;">
                  <font color="grey">Update</font>
                </th>
              </tr>
            </thead>
            <tr>
              <td style="width:8%;white-space:nowrap;"></td>
              <td style="width:8%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:18%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:10%;white-space:nowrap;"></td>
              <td style="width:8%;white-space:nowrap;"><a>Det </a></td>
              <td style="width:8%;white-space:nowrap;"><a> ed </a></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>