Question

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

我已经在css中声明了nowrap文本，甚至td和th，但它无效。

如何解决此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;
}

Answer 1

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

此处的关键是提供表parent元素position:relative;，float:left;和宽度width:100%;，以便表格width:100%;具有含义。（100％的是什么？）。

您也不需要为每列提供width。它足以为one row提供宽度，table的其余部分将使用those rules。

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

以下是代码:(运行代码段）

注意： th上的边框仅用于显示width of each。我还将width的{{1}}从widest column更改为18%，并将14%更改为最后两列（4%）。< / p>

＆＃13;

2% each

＆＃13;

.table-responsive
{
  position:relative;
  float:left;
  width:100%;
}

table
{
  width: 100%;
}

th
{
  color:grey;
  border:1px solid #000;
}

td
{
  text-align:right;
}

＆＃13;

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

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

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

3 个答案: