Question

这是我的代码的小提琴

我的问题是，由于我要添加许多tr，所以会有绝对的滚动，但如果我在同一行上制作三个tr，我就不会有问题

你可以帮助我在同一条线上制作三个tr吗？

当我的代码是这样的时候：

#agentsTable tr {
    min-width:100%;
    max-width:100%;
}

它是特定行上的每个tr，但后来我尝试这样做：

#agentsTable tr {
    width:30%;
    display:inline-block;
}

正如您在jsfiddle中看到的那样，单元格之间有许多空白区域。

我想做的是在同一条线上有三个tr，但它应该有相同的宽度，没有任何空间

Answer 1

我认为你在这里所做的就像上面的例子所解释的那样（使用td，因为它们应该被使用）。不确定为什么你要使用表格，如果你要使用css使它像其他东西一样。

如果要保留表，请选择上面的答案，否则更改标记并更改css以使用块元素和浮点数来实现此行为。

css规则来实现这种行为：

.agentLabel, .talkingAgentClass{
box-sizing:border-box;
width:29%;
margin:0 2% 10px;
float:left;
height:90px;
text-align:center;
min-width:100px;
}

See this fiddle for example.

还要注意在div中使用辅助跨度，这是为了使文本在div中保持垂直对齐。

玩得开心。

Answer 2

您需要更改HTML才能解决此问题。

在每个<td>中放置三个<tr>。

表行（tr）由一组表格单元格组成（td代表表格数据） - 您可以根据需要在tr中包含尽可能多的td。

Like this jsfiddle here

<tr >
    <td class="talkingAgentClass">somthing</td>
    <td class="talkingAgentClass">somthing</td>    
    <td class="talkingAgentClass">somthing</td>
</tr>

注意，为了实现这种效果，我还改变了css，移除display: inline-block;并将width: 33%;应用于<td>

最后，要使代理标题跨越三列，请在td上使用colspan='3'，can see here

Answer 3

试试这个：

#agentsTable td {
    display:block;
}

https://jsfiddle.net/sb73g9kr/7/

Answer 4

你的问题本身在html中是错误的，一行表示一行代表如何在同一行中使用tr三次。

html表如何在同一行上制作三个tr

4 个答案: