我已经在一个项目上工作了几天，而我一直遇到这个问题。我有一个包含数据的表，并且我希望每边的填充为30px，并且“ .task-link”或“ header-6”随窗口扩展。取而代之的是div的宽度遍及整个屏幕，看起来不均匀，这使我丧命。抱歉，HTML的新知识，请给我一点点懈怠，我敢肯定，这很明显，我尝试了很多不同的方法而没有成功，而且我不明白为什么它应该覆盖整个屏幕。无论如何，这是我的代码：
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
} <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div id="tablediv">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
</main>
</body>
这是现在正在发生的事情的示例，我希望它看起来像什么。 现在：https://gyazo.com/00870da7fa1d8642dde8814ab4bd3bac
我想要的是：https://gyazo.com/8c5a48ceb6a4e2470dbf10c686992fbc
该表一直到另一边，每边填充30px，并且页眉6扩展以匹配屏幕的扩展，并且当它变小时，我只希望页眉6变小。
答案 0 :(得分：2)
您可以使用引导响应表。在这里.table-sensitive类创建了一个响应表，该表将在小型设备（768像素以下）上水平滚动，并且在大于768像素宽的任何内容上查看时，它将使用屏幕的整个宽度显示该表。
django.middleware.csrf.get_token(request)
答案 1 :(得分：1)
删除col-sm-8并检出引导程序网格
答案 2 :(得分：1)
引导网格始终必须排成一行，而且网格持续存在12列。
例如：
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
这将给出3个具有相同宽度的相同列
摘要：
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
} <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div class="row" id="tablediv">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
<div class="col-sm-2"></div>
</div>
</main>
</body>
如您所见，这在屏幕的两侧都形成了一个空白点。 此外，https://getbootstrap.com/docs/4.0/layout/grid/还提供了很多信息，请务必对其进行检查。