gpt4 book ai didi

html - 如何使表格单元格根据内容展开

转载 作者:行者123 更新时间:2023-12-05 02:20:22 35 4
gpt4 key购买 nike

我想在表格旁边放置 3 个 div。表格应该根据里面的内容展开,3个div应该平均占据剩余的空间。

我需要像这样在移动 View 中将 div 堆叠在 table 下面...

Desktop:
[div-1] [div-2] [div-3] [table]

Mobile:
[table]
[div-1]
[div-2]
[div-3]

我一直在尝试使用 Flex 来让它工作,但我无法让表格根据里面的内容展开。

而且我不能使用 td {white-space: nowrap;} 因为在移动设备上它会将文本推出屏幕的一侧。我需要表格根据里面的内容展开,但内容不应该被强制到屏幕之外。它需要像往常一样在较小的屏幕上环绕。

这是我的工作示例:http://codepen.io/anon/pen/qadbkK?editors=1100

/* Do this on tablet size and up */

@media (min-width: 481px) {
/* Main outer div of helper items AND subtotals */
.cart-collaterals {
display: inline-flex;
}
/* Outer div of helper items */
.cart-helper-outer {
order: -1;
display: inline-flex;
justify-content: space-around;
}
/* Helper item width */
.cart-helper-inner {
max-width: 25%;
}
/* Helper item font */
.cart-helper-inner p {
text-align: center;
}
}
<div class="cart-collaterals">

<div class="cart_totals">
<table class="shop_table" cellspacing="0">
<tbody>
<tr class="cart-subtotal">
<th>Subtotal</th>
<td data-title="Subtotal">$ 348</td>
</tr>
<tr class="shipping">
<th>Shipping</th>
<td data-title="Shipping">
The table should expand so that this is one line of text
</td>
</tr>
<tr class="order-total">
<th>Total</th>
<td data-title="Total">$ 348</td>
</tr>
</tbody>
</table>
</div>

<div class="cart-helper-outer">
<div class="cart-helper-inner">
<p>This is some text. Blah blah blah. Here is some text.</p>
</div>
<div class="cart-helper-inner">
<p>This is some text. Blah blah blah. Here is some text.</p>
</div>
<div class="cart-helper-inner">
<p>This is some text. Blah blah blah. Here is some text.</p>
</div>
</div>

</div>

最佳答案

td 设置 white-space: nowrap 以便在一行中获取整个文本。

/* Do this on tablet size and up */

@media (min-width: 481px) {
/* Main outer div of helper items AND subtotals */
.cart-collaterals {
display: inline-flex;
}
/* Outer div of helper items */
.cart-helper-outer {
order: -1;
display: inline-flex;
justify-content: space-around;
}
/* Helper item width */
.cart-helper-inner {
max-width: 25%;
}
/* Helper item font */
.cart-helper-inner p {
text-align: center;
}
}

td{
white-space: nowrap;
}
<div class="cart-collaterals">

<div class="cart_totals">
<table class="shop_table" cellspacing="0">
<tbody>
<tr class="cart-subtotal">
<th>Subtotal</th>
<td data-title="Subtotal">$ 348</td>
</tr>
<tr class="shipping">
<th>Shipping</th>
<td data-title="Shipping">
The table should expand so that this is one line of text
</td>
</tr>
<tr class="order-total">
<th>Total</th>
<td data-title="Total">$ 348</td>
</tr>
</tbody>
</table>
</div>

<div class="cart-helper-outer">
<div class="cart-helper-inner">
<p>This is some text. Blah blah blah. Here is some text.</p>
</div>
<div class="cart-helper-inner">
<p>This is some text. Blah blah blah. Here is some text.</p>
</div>
<div class="cart-helper-inner">
<p>This is some text. Blah blah blah. Here is some text.</p>
</div>
</div>

</div>

关于html - 如何使表格单元格根据内容展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39366433/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com