如何删除表格中重叠的文本？答案

【问题标题】：How to remove text overlapping in table?如何删除表格中重叠的文本？
【发布时间】：2018-01-17 13:25:31
【问题描述】：

设计了带边框的响应式表格。问题在于换行，即使在 css 中包含 th.nowrap 时，当我查看移动视图时，数据重叠并且出现两条水平线。

我已经在 css 甚至 td 和 th 中声明了 nowrap 文本，但它不起作用。

我该如何解决这个 wraptext 错误？

<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>

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 真正有效...
style="width:7.8% 它不会创建扭曲文本吗？
我不知道。使用适当的代码编辑器突出显示无效的 HTML 并修复它。

标签： javascript jquery html bootstrap-4

【解决方案1】：

我想这就是你想要的。我删除了所有nowrap 代码，因为您不需要它来实现responsive layout。

这里的关键是给表格parent元素position:relative;、float:left;和一个宽度width:100%;，这样表格的width:100%;就有意义了。（100% 什么？）。

您也不需要为每一列指定width。为one row 提供宽度就足够了，其余的table 将使用those rules。

桌子里面有一个<div>，我把它移到桌子上方。

这里是代码：（运行sn-p）

注意：th 上的边框只是为了显示width of each。我还将widest column 的width 从18% 更改为14%，并将4% 提供给最后两列（2% each）。

.table-responsive
{
  position:relative;
  float:left;
  width:100%;
}

table
{
  width: 100%;
}

th
{
  color:grey;
  border:1px solid #000;
}

td
{
  text-align:right;
}

<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">
      
       <div class="panel-heading">
        <span class="panel-title">
        <span class="fa fa-table"></span><font color="blue">Se</font></span>
       </div>
      
        <table class="table table-bordered mbn">
        <tr>
          <th style="width:8%;">Enq</th>
          <th style="width:8%;">Da</th>
          <th style="width:10%;">Bu</th>
          <th style="width:10%;">Prop</th>
          <th style="width:14%;">Pr</th>
          <th style="width:10%;">District</th>
          <th style="width:10%;">City</th>
          <th style="width:10%;">Bedrooms</th>
          <th style="width:10%;">Details</th>
          <th style="width:10%;">Update</th>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>Det</td>
          <td>ed</td>	
        </tr>
        </table>
      </div>
    </div>
   </div>
 </div>
</div>

【讨论】：

【解决方案2】：

请使用此代码

<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
    <p>Some default panel content here.</p>
</div>

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Test</td>
                <td>Test</td>
                <td>Test</td>
            </tr>
        </tbody>
    </table>
</div>

【讨论】：

我需要用这个来调整表头和表数据。。当我使用此文本时，会自动换行。

【解决方案3】：

请使用以下代码

<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:8%;white-space:nowrap;"><font color="grey">Enq</font></th>
  <th style="width:8%;white-space:nowrap;" nowrap="nowrap"><font color="grey">Da</font></th>
  <th style="width:10%;white-space:nowrap;"><font color="grey">Bu</font></th>
  <th style="width:10%;white-space:nowrap;"><font color="grey">Prop</font></th>
  <th style="width:18%;white-space:nowrap;"><font color="grey">Pr</font></th>
  <th style="width:10%;white-space:nowrap;""><font color="grey">District</font></th>
  <th style="width:10%;white-space:nowrap;"><font color="grey">City</font></th>
   <th style="width:10%;white-space:nowrap;"><font color="grey">Bedrooms</font></th>
  <th style="width:8%;white-space:nowrap;"><font color="grey" >Details</font></th>
  <th style="width: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;">Det </a></td>
        <td style="width:8%;white-space:nowrap;"> ed </a></td>  

    </tr>



 </table>

  </div>
 </div>
 </div>
 </div>
 </div>

【讨论】：

考虑为您所做的更改以及为什么、为什么 OP 应使用此代码等添加解释。这对您的两个答案都适用 :)
7.8% 无法正常工作，因为点值不高……这就是我使用 8% 的原因。我想我的第一个答案和这个答案。不一样...在第一个答案中，我使用了与引导程序相同的正确表编码。
不要向我解释 :) 我的意思是，编辑您的答案以提供有关您所做工作的更多详细信息，（也许它会起作用）等。
清除了您的答案？看看我的回答，它可能不是 OP 想要的，但它至少解释了我做了什么以及为什么。而且，您可以运行和测试它。尝试在你的答案中添加解释，并可能制作 sn-ps 来证明你在说什么。我并不是说你的答案不好，我只是建议如何改进它们（也为了未来的读者）。
为了未来读者的利益 = 我的建议是不要使用内联样式和点值...如果任何用户使用引导程序，那么我们可以使用默认表 css，这对我们非常有用。