下面有我在HTML / CSS中复制过的截图。 移动和桌面视图的设计完全相同。在设计中,角度下拉字体 - 真棒图标(在屏幕截图中标有箭头)与标题正确对齐,而在移动视图中我的设计并非如此。
第一张图片:
我为上面的屏幕截图创建了fiddle。由于某些原因,我没有看到小提琴中的移动视图(我们是否有办法在小提琴中启用移动视图?)。我在小提琴中使用的HTML代码片段是:
<tr>
<th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
<th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
<th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
<th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
</tr>
在我的电脑上的移动视图(如屏幕截图中所示),我看到角度下拉图标上的数字和表标题。
第二张图片:
问题陈述:
我想知道我需要在fiddle中做出哪些更改,以便数字和表格标题与角落下拉字体对齐 - 移动视图中的精彩图标(在第一张图片中标记为箭头)。
由于某些原因,我无法在小提琴中看到移动视图。
答案 0 :(得分:3)
只需使用 Bootstrap 4 text-nowrap
课程即可...
https://jsfiddle.net/9shn3qxz/
<div class="table-responsive body-manage-attendees">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
<th scope="col" class="number text-nowrap">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
<th scope="col" class="table2 text-nowrap">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
<th scope="col" class="status text-nowrap">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Amanda Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-bill">Bill</td>
</tr>
<tr>
<td class="left">Andy Doe</td>
<td class="number1">14</td>
<td class="table1">1</td>
<td class="right-bill">Bill</td>
</tr>
</tbody>
</table>
</div>
答案 1 :(得分:2)
似乎有两种选择可以立即浮现在脑海中。
使用<div class="table-responsive">
围绕您的桌子以确保响应。
由于您使用的是Bootstrap 4,我会将其保留为“移动优先”。
th {
font-size: 14px; // Smallest font size you want them to render
}
@media (min-width: 768px) {
// After the screen is at least 768px wide, use larger font size
// alter the min-width as many times as needed or appropriate
th{
font-size: 16px;
}
}
这基本上就是你在CSS里面做的事情。首先保持移动视图,并构建更大的显示尺寸。
使用样式,删除.table td, .table th
上的左/右填充似乎可以解决图标问题。您可能只想调整移动视图的列填充。
答案 2 :(得分:2)
最简单的方法是将white-space:nowrap
添加到th
,这样这些字词就不会被分割出来。但是,您应该对表格添加一些响应。
.table td,
.table th {
border-top: none! important;
padding-left: 3%;
}
.table thead th {
border-bottom: none! important;
white-space: nowrap;
}
.table td.left {
padding-right: 32%;
}
.dropdown a {
color: #676767;
font-weight: bold;
font-size: 14px;
}
.dropdown li {
padding-left: 20px;
}
.dropdown li:hover {
background-color: #EDEDED;
}
.body-manage-attendees {
width: 100% !important;
}
.body-manage-attendees tbody tr:hover {
background-color: #EDEDED;
}
.body-manage-attendees .number {
padding-left: 2%;
padding-right: 6%;
}
.body-manage-attendees .table1 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .table2 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .status {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right-bill {
padding-left: 1%;
color: white;
text-align: center;
border: 1px solid white;
background-color: #1173B7;
}
.body-manage-attendees .right-nobill {
padding-left: 1%;
text-align: center;
border: 1px solid white;
color: black;
}
.body-manage-attendees .right-unapid {
padding-left: 1%;
color: white;
text-align: center;
border: 1px solid white;
background-color: #1173B7;
}
.body-manage-attendees .right-itemsreceived {
padding-left: 1%;
color: white;
text-align: center;
border: 1px solid white;
background-color: #10314C;
}
.square {
display: inline-block;
border-radius: 5px;
border: 1px solid white;
margin-right: 5%;
height: 15px;
width: 15px;
vertical-align: middle;
}
.square.white {
display: inline-block;
border-radius: 5px;
border: 1px solid white;
background-color: white;
height: 15px;
margin-right: 10%;
width: 15px;
vertical-align: middle;
}
.right-itemswaiting span {
vertical-align: middle;
padding-left: 1%;
}
.table td,
.table th {
border-top: none! important;
padding-left: 3%;
}
.table thead th {
border-bottom: none! important;
}
.table td.left {
padding-right: 32%;
}
.right-itemswaiting {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.right-itemsreceived {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.body-manage-attendees tbody tr:hover {
background-color: #EDEDED;
}
.body-manage-attendees .number {
padding-left: 2%;
padding-right: 6%;
}
.body-manage-attendees .table1 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .table2 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .status {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right-bill {
padding-left: 1%;
color: white;
text-align: center;
border: 1px solid white;
background-color: #1173B7;
}
.body-manage-attendees .right-nobill {
padding-left: 1%;
text-align: center;
border: 1px solid white;
color: black;
}
.body-manage-attendees .right-unpaid {
padding-left: 1%;
color: white;
text-align: center;
border: 1px solid white;
background-color: #1173B7;
}
.body-manage-attendees .right-itemsreceived {
padding-left: 1%;
color: white;
text-align: center;
background-color: #10314C;
}
.body-manage-attendees .right-itemswaiting {
padding-left: 1%;
text-align: center;
color: white;
border: 1px solid white;
background-color: #10314C;
}
.body-manage-attendees .right-unpaid {
padding-left: 1%;
color: white;
background-color: #1173B7;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="table-responsive body-manage-attendees">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
<th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
<th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
<th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Amanda Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-bill">Bill</td>
</tr>
<tr>
<td class="left">Andy Doe</td>
<td class="number1">14</td>
<td class="table1">1</td>
<td class="right-bill">Bill</td>
</tr>
</tbody>
</table>
</div>
答案 3 :(得分:1)
您可以设置表格td和th的最小宽度。
.table td,
.table th {
border-top: none! important;
padding-left: 3%;
min-width:140px;
}
您可能需要调整应用于最小宽度的实际值。这将防止列占用小于设置的宽度,但不会限制列仅占用该空间量。
我还会考虑为每列应用不同的最小宽度,因为Number列需要大约140px,但Table列只需要大约80px。这将为名称留出更多可用空间。
答案 4 :(得分:0)
要解决此问题,您可以尝试将Bootstrap 4 text-nowrap
类添加到表中。
或强>
您可以编辑表格的css属性以使white-space:nowrap