问题描述
我尝试创建具有2列的表格，对于移动视图，我想隐藏水平滚动条，只将列中的内容向下推，但在500px以下，它将继续创建水平滚动条。 我使用bootstrap 4，并且我喜欢表响应式的类。我尝试手动设置边距和填充，并且试图隐藏滚动条，但没有任何效果。
.container {
position: relative;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
table {
border-top: hidden;
}
.table td,.table th {
width: 50%;
padding-left: 10px;
}
td,th[scope=row] {
color: #808080;
}
.odd-section {
width: 100%;
background: #fff;
padding: 3em 0em;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<!-- TABLE -->
<div class="odd-section">
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th class="" scope="col">Lorem Lorem</th>
<th scope="col">Result</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.This will also work on secret lots.</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first,then Popper.js,then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>解决方法
将float:left，word-break: break-word;和width: 50%一起添加到.table td,.table th将会得到结果。
.container {
position: relative;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
table {
border-top: hidden;
}
.table td,.table th {
width: 50%;
float: left;
word-break: break-word;
padding-left: 10px;
}
td,th[scope=row] {
color: #808080;
}
.odd-section {
width: 100%;
background: #fff;
padding: 3em 0em;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<!-- TABLE -->
<div class="odd-section">
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th class="" scope="col">Lorem Lorem</th>
<th scope="col">Result</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
</tr>
<tr>
<th scope="row">Lorem Ipsum is </th>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.This will also work on secret lots.</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first,then Popper.js,then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>