如何使 html 表响应？
Posted
技术标签:
【中文标题】如何使 html 表响应？【英文标题】：How to make the html table responsive? 【发布时间】：2017-09-13 19:26:17 【问题描述】：我使用 Bootstrap div 制作了下表，但它对移动设备没有响应。 我使用了 col-xs，但在移动视图中列仍然相互合并。有没有其他方法可以使此代码响应移动设备？
<div class="container" style="color: grey; padding-top: 40px">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-xs-12" style="border-bottom: 1px solid #eee;">
<div class="col-md-6 col-xs-4">
<span>Item</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Price</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Quantity</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Total</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Delivery Charge</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Discount</span>
</div>
<div class="col-md-1 col-xs-1">
<span>Subtotal</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-md-6 col-xs-6">
<div class="col-md-5 col-xs-5">
<img src="https://n1.sdlcdn.com/imgs/a/i/0/large/Mboss-Overnighters-SDL963993531-1-2f227.jpg" class="img-responsive">
</div>
<div class="col-md-7 col-xs-7 ">
<h5>Deisy brown Laptop Overnight</h5><br>
<div class="row">
<div class="col-md-12 col-sm-2 ">
<h5>
<b>Seller Information:</b>
</h5>
</div>
<div class="col-md-12 col-sm-10">
<h6>
<b>Book Centre</b><br>
371 Colvinjh de sihjglva ,<br>
vvv Place,<br>
Chghhhgg2<br>
0123689955<br>
</h6>
</div>
</div>
</div>
</div>
<div class="col-md-1 col-xs-1">
<span>5780</span><br>
</div>
<div class="col-md-1 col-xs-1">
<span> 5780</span>
</div>
<div class="col-md-1 col-xs-1">
<span> 5780</span>
</div>
<div class="col-md-1 col-xs-1">
<span>0%</span>
</div>
<div class="col-md-1 col-xs-1">
<span>575855</span>
</div>
<div class="col-md-1 col-xs-1">
<span>575855</span>
</div>
</div>
</div>
</div>
【问题讨论】：
使用引导程序的表格响应功能。阅读更多here 使用footable fooplugins.github.io/FooTable/index.html，这是让表格响应的最佳方式 代码中的表格在哪里？另外，如果您也使用col-xs-1 和col-md-1，您如何期望它在超小屏幕上显示不同的布局？
您缺少很多“行” div
你可以像codepen.io/geoffyuen/pen/FCBEg这样或者使用引导程序请添加类“table-responsive”像这里w3schools.com/bootstrap/…
【参考方案1】：
您可以将<table> 标签包裹在<div class="table-responsive"></div> 中，因为您使用的是bootstrap。就像这样：（使用<table>而不是网格系统（例如col-xs-1等））
<div class="table-responsive">
<table class="table">
...
</table>
</div>
访问此链接（引导程序）了解更多信息： [Visit Me]
.. 就是这样！ 快乐编码:)
【讨论】：
【参考方案2】：可以考虑使用以下四个选项来使表格具有响应性。请选择符合您要求的那一款。
挤压：如果列的内容很少，它们可能会水平挤压而在移动屏幕上没有问题，因此不更改布局是一个有效的选项。
垂直滚动：如果布局和内容准确且重要，用户可以向左或向右滚动。这在带有 overflow="auto" 包装器的 CSS 中是微不足道的。
按行折叠：在小屏幕上将每一行拆分为自己的单列迷你表格。将 display:table 切换为 display:block 将导致使用正常的表格标记。
按列折叠：这就是事情变得棘手的地方。您不能使用纯 CSS 中的普通表格标记来做到这一点，因为代码顺序是按行排列的，并且包装器会将其锁定。我们要么必须更改标记，要么开始使用 javascript 进行操作。
【讨论】：
【参考方案3】：最好使用 Bootstrap 响应式表格。链接在这里。这是最可取的链接。我用过很多次。
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_table-responsive&stacked=h
【讨论】：
【参考方案4】：@temp 很久以前，我使用以下代码使我的表响应。我希望它会帮助你。
/*...............Table Starts....................*/
.table_custom_1
width: 100%;
border: 1px solid #eee;
overflow: hidden;
.table_custom_1 td
display: block;
.table_custom_1 th, .table_custom_1 td
display: table-cell;
text-align: left;
.table_custom_1, .custom_table
width: 100%;
.table_custom_1 thead tr th, .custom_table tr th
background: #ECECEC none repeat scroll 0 0;
color: #999999;
font-family: opensans-Bold;
font-size: 11px;
padding: 5px 6px;
.table_custom_1 tbody tr td
border-bottom: 1px solid #e0e0e0;
color: #414042;
font-family: opensans-regular;
font-size: 12px;
padding: 8px 6px;
vertical-align: top;
word-break: break-all;
.table_custom_1 tbody tr td.table_secondary_text
font-size: 10px;
color: #999999;
.table_custom_1 tr td:first-child
padding-left: 15px;
.table_custom_1 tr td:last-child, .table_custom_1 tr th:last-child
padding-right: 15px;
.table_custom_1 tr.selected td
background: #FAFAFA;
.table_custom_1 .btn
display: inline-block;
.table_custom_1 .table_icon i
color: #878787;
font-size: 14px;
position: relative;
top: 3px;
.table_custom_1 .table_icon:hover, .table_custom_1 .table_icon .table_icon:focus
text-decoration: none;
.table_custom_1 .badge
margin-top: -3px;
margin-left: 4px;
.table_custom_1 thead tr th input
font-size: 12px;
.table_custom_1 .table_custom_1
border: medium none;
.table_custom_1 tbody tr td i.indicator
margin-right: 5px;
font-size: 8px;
/*.....................Media Queries starts.........*/
@media (max-width: 700px)
.table_custom_1 th, .table_custom_1 td
display: inherit;
.table_custom_1 td:before
content: attr(data-th) ": ";
width: 6.5em;
display: inline-block;
color: #b7b7b7;
.table_custom_1
border: 0px;
.table_custom_1 tr
background-color: #fff;
border: 1px solid #eee;
display: block;
margin-bottom: 15px;
box-shadow: 0 1px 5px -3px rgb(164, 164, 164);
.table_custom_1 tr td
padding: 4px 10px !important;
.table_custom_1 tbody tr td:first-child:before
padding-left: 0;
content: '';
width: 0;
.table_custom_1 tbody tr td:first-child
font-family: OpenSans-Semibold;
color: #217589;
font-size: 16px;
.table_custom_1.checkbox_table thead tr th:first-child
display: block;
padding-left: 15px;
.table_custom_1.checkbox_table thead tr th, .table_custom_1 thead
display: none;
.checkbox_table thead
display: block !important;
@media (max-width:600px)
.table_custom_1 tr, .table_custom_1 td
display: block;
.table_custom_1 tbody tr td:first-child
color: #217589;
font-size: 16px;
.table_custom_1 thead
display: none;
@media (min-width: 480px)
.table_custom_1 td:before
display: none;
.table_custom_1 th:first-child, .table_custom_1 td:first-child
padding-left: 15px;
.table_custom_1 th:last-child, .table_custom_1 td:last-child
padding-right: 0;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<table class="table_custom_1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>D.O.B</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td data-th="Age">20</td>
<td data-th="D.O.B">1977</td>
<td data-th="Location">Delhi</td>
</tr>
<tr>
<td data-th="Name">Vivek</td>
<td data-th="Age">30</td>
<td data-th="D.O.B">1986</td>
<td data-th="Location">Vadodara</td>
</tr>
<tr>
<td data-th="Name">Sahil</td>
<td data-th="Age">23</td>
<td data-th="D.O.B">1973</td>
<td data-th="Location">J&K</td>
</tr>
</tbody>
</table>
</div>
</div>【讨论】：
【参考方案5】：我希望这将有助于使表格具有响应性。
这是fiddle HTML：
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>Qasim</td>
<td>23yrs</td>
<td>Male</td>
</tr>
<tr>
<td>Ali</td>
<td>19yrs</td>
<td>Male</td>
</tr>
<tr>
<td>William</td>
<td>34yrs</td>
<td>Male</td>
</tr>
</tbody>
</table>
CSS：
td
width:100px;
@media (max-width: 600px)
thead
display: none;
tr
display:grid;
border-bottom:1px solid #000000;
td:nth-of-type(1):before content: "Name";
td:nth-of-type(2):before content: "Age";
td:nth-of-type(3):before content: "Gender";
td:before
width:150px;
float:left;
td
width:300px;
【讨论】：
【参考方案6】：这是我的例子：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=s, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/responsive-table.css" type="text/css" />
<title>Responsive Tables</title>
</head>
<body style="background:#F2F2F2">
<!-- This is populated dynamically with JQuery since Pseudo elements can't be set in JS-->
<div id="custom-css"></div>
<!-- DONT DELETE THIS DIV -->
<div class="table-container">
<table>
<tr>
<th>TEAM NAME</th>
<th>WINS</th>
<th>LOSSES</th>
<th>GOALS FOR</th>
<th>GOALS DIFFERENCE</th>
<th>POINTS</th>
</tr>
<tr>
<td>Team A</td>
<td>26</td>
<td>1</td>
<td>77</td>
<td>+57</td>
<td>85</td>
</tr>
<tr>
<td>Team B</td>
<td>27</td>
<td>4</td>
<td>86</td>
<td>+64</td>
<td>83</td>
</tr>
<tr>
<td>Team C</td>
<td>22</td>
<td>10</td>
<td>64</td>
<td>+30</td>
<td>67</td>
</tr>
<tr>
<td>Team D</td>
<td>20</td>
<td>7</td>
<td>66</td>
<td>+26</td>
<td>66</td>
</tr>
</table>
</div><!-- close table container -->
<div class="table-container" style="margin-top:5em">
<table>
<tr>
<th>CLUB</th>
<th>MANAGER</th>
<th>COUNTRY</th>
</tr>
<tr>
<td>Liverpool</td>
<td>Jurgen Klopp</td>
<td>England</td>
</tr>
<tr>
<td>Real Madrid</td>
<td>Zinedine Zidane</td>
<td>Spain</td>
</tr>
<tr>
<td>Celtic FC</td>
<td>Neil Lennon</td>
<td>Scotland</td>
</tr>
<tr>
<td>Tottenham</td>
<td>Jose Mourinho</td>
<td>England</td>
</tr>
<tr>
<td>Atlético Madrid</td>
<td>Diego Simeone</td>
<td>Spain</td>
</tr>
<tr>
<td>Inter Milan</td>
<td>Antonio Conte</td>
<td>Italy</td>
</tr>
</table>
</div><!-- close table container -->
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="assets/js/responsive-table.js"></script>
</html>
CSS
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
.table-container
background: #FFFFFF;
margin: 2% 1.5%;
padding: 1%;
color: #555555;
font-family: 'Roboto';
font-size: 13px;
font-weight: 400;
table
border-collapse: collapse;
border-spacing: 0;
width: 100%;
/* Table Header Cell and Standard Cell */
th,
td
text-align: left;
padding: 8px;
/* Table Headings */
th
color: #555555;
background: #DDD;
font-family: 'Roboto';
font-size: 12px;
font-weight: 600;
/* For All Devices Above 600px */
@media only screen and (min-width: 600px)
/* Styles the background color off every odd table row */
tr:nth-child(odd)
background: #F2F2F2 ;
/* Close Media Query */
/* For All Devices Below 600px */
@media only screen and (max-width: 600px)
.container
margin: 3.5% 1.5%;
/* Force table to not be like tables anymore */
table,
thead,
tbody,
th,
td,
tr
display: block;
/* Hide table headers (but not display: none;, for accessibility) */
thead tr
position: absolute;
top: -9999px;
left: -9999px;
/* Add Border to make easier to read*/
tr
border: 1px solid #ccc;
/* Behave like a "row" */
td
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 60%;
td:nth-child(1)
background: #DDD;
/* Now like a table header */
td:before
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: 600;
/* Hide Table Headings */
th
display: none;
Javascript/Jquery
function responsiveTable(screenSize)
// If media query is below 600px
if (screenSize.matches)
// Array to push up CSS styles too
var stylesArray = [];
// Getting the amount of tables
var tableCount = $('table').length;
// Iterate through each table
for(a = 1; a <= tableCount; a++)
// Target each indivdual table
var tableClass = ".table-container:nth-of-type("+(a+1)+") table";
// Declaring unique table class
var newTableClass = "table-"+(a);
// Add Unique Class to each table occurence
$(tableClass).addClass(newTableClass);
// Getting Table Headings for Indivdual Classes
var tableClassHeading = "."+newTableClass + " th";
// Count the table headings
var tableHeadingCount = $(tableClassHeading).length;
// Iterate through Table Headings
for(i = 0; i < tableHeadingCount; i++)
// Adding the . notation to make it a class to use with JQuery
var editedClass = "."+newTableClass;
// Getting the value of the table heading
var tableHeading = $(editedClass).find("th").eq(i).html();
// Creating CSS Style and Setting Table Row (Heading) with Table Heading;
var cssRole = editedClass+' td:nth-of-type('+(i+1)+'):before content: "'+tableHeading+'"';
// Pushing CSS style to Styles Array
stylesArray.push(cssRole);
// close the i for loop
//close the a for loop
// Building the CSS stylesheet
var styleSheet = "<style> ";
// Iterate through each style rule
for(q = 0; q < stylesArray.length; q++)
// Setting the CSS Rule
var indivdualStyleRule = stylesArray[q];
// Appending the rule to string
styleSheet += indivdualStyleRule;
// Finished CSS Style
var finishedStyleSheet = styleSheet + " </style>";
// Add Style to HTML
$('#custom-css').append(finishedStyleSheet);
// close if for media query
else
// Clear all styles that were created
$('#custom-css').empty();
// close else
// close responiveTable function
// Set the responsive width for tables. Must match value set in css
var smallScreenSize = window.matchMedia("(max-width: 600px)");
// Call listener responsiveTable function at run time
responsiveTable(smallScreenSize);
// Attach listener function on state changes
smallScreenSize.addListener(responsiveTable);
我的代码：Preview
Github：Code
【讨论】：
以上是关于如何使 html 表响应？的主要内容，如果未能解决你的问题，请参考以下文章