我们如何在不使用 bootstrap 或 JQuery 的情况下使 HTML 表格响应，它有超过八列。
我对每一列使用百分比，即使当我们增加文本时它没有响应
滚动到底部。如何避免滚动，我不想使用 Unorder 列表或 div 元素
body{
font-family: arial, sans-serif;
font-size:12px
}
.text-to-right {
text-align: right;
}
.text-to-left {
text-align: left;
padding-left: 1rem;
}
table {
width: 100%;
border-left: 1px solid #f3f1f1;
border-bottom: 1px solid #f3f1f1fa;
border-spacing: 0;
}
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
border-left: 1px solid #f3f1f1;
border-bottom: 1px solid #d2cecefa;
/*box-shadow: 0 2px 4px 0 rgba(241, 230, 230, 0.16), 0 2px 10px 0 rgba(247, 245, 245, 0.12);*/
box-shadow: 0 1px 1px 0 #f3f1f1,0 1px 1px 0 #f3f1f1;
}
.table-bordered > tbody > tr > td:first-child,
.table-bordered > tbody > tr > th:first-child,
.table-bordered > tfoot > tr > td:first-child,
.table-bordered > tfoot > tr > th:first-child,
.table-bordered > thead > tr > td:first-child,
.table-bordered > thead > tr > th:first-child {
border-left-width: 0;
}
.table-bordered tbody tr td:last-child,.table-bordered thead tr th:last-child {
border-right: 1px solid #f3f1f1;;
}
.table-bordered > thead > th:last-child {
border-right: 1px solid #f3f1f1;
}
th {
padding: 1rem 0;
background: #192b4b;
color: #fff;
font-size: 1.3rem;
font-weight: normal;
border-left: 1px solid #f3f1f1;
}
td {
padding: 1rem;
text-transform: capitalize;
color: #6b5e5e;
}
.table-bright-data {
color: #007dc5;
font-size: 1.8rem;
font-family: 'Roboto Condensed', Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th width="05%">
S.No
</th>
<th class="text-to-left" width="23%">Name</th>
<th width="10%">Code</th>
<th width="12%">Type</th>
<th width="10%"> Profile</th>
<th width="13%">Time</th>
<th width="10%">Size</th>
<th width="11%">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-center">
1
</td>
<td class="text-to-left table-bright-data">Responsive layout</td>
<td class="text-to-left">LDHSNSJ734674</td>
<td class="text-to-left">Fixed Interest </td>
<td class="text-to-left">high </td>
<td class="text-to-right">No minimum </td>
<td class="text-to-right">0 </td>
<td class="text-to-right">05-Dec-2001 </td>
</tr>
<tr>
<td class="align-center">
2
</td>
<td class="text-to-left table-bright-data">Responsive layout</td>
<td class="text-to-left">DHEYE933</td>
<td class="text-to-left">Responsive layout </td>
<td class="text-to-left"> </td>
<td class="text-to-right">No minimum </td>
<td class="text-to-right">0 </td>
<td class="text-to-right">05-Dec-2001 </td>
</tr>
</tbody>
</table>
</body>
</html>最佳答案
你可以像这样折叠一个表格
CSS
@media (max-width: 1024px) {
.collapse {
display: block;
}}
HTML
<td class="collapse">
Content
</td>
<td class="collapse">
Content
</td>
我会添加多个具有不同 @media (max-width: xxx) 的类，这样它们就不会一下子全部折叠起来。你想如何折叠它们，以及你应该自己弄清楚的顺序。
你可以看这里https://css-tricks.com/responsive-data-tables/如果您还有其他问题。
我个人喜欢在表格上使用 div，例如:http://www.responsivegridsystem.com/
关于html - 在不使用 jQuery 或 Javascript 的情况下使 html 表响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48760979/