如何在不使用bootstrap或jQuery的情况下使HTML表响应响应，它具有八列以上。
当我们增加文本
时，每列我都使用百分比滚动在底部。如何避免滚动，我不想使用统一列表或Div Elements
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/