如何将td内的div宽度设置为父级？

I have simple table with Bootstrap. The problem is that there is a long line with text. I want to add bottom scroll to it so I created a div inside td and putted text there. To the div I added max-height: 75px; overflow:auto; width: auto; width: 100%; max-width: 100%; styles, but it still comes out...

我有一个简单的表与Bootstrap。问题是文本有很长的路线。我想在其中添加底部滚动，因此我在td中创建了一个div并在那里创建了文本。对于div，我添加了max-height：75px;溢出：汽车;宽度：自动;宽度：100％;最大宽度：100％;款式，但它仍然出来......

如何将td内的div宽度设置为父级？

P.S. Template is based on the percents so I cant add width in px.

附：模板基于百分比，所以我不能在px中添加宽度。

2 个解决方案

#1

I think this will solve your problem. If you want the column to be shorter, set some width to parent td.

我想这会解决你的问题。如果希望列更短，请将某个宽度设置为父td。

.div-inside-td {
    height: 75px;
    max-width: 100%;
    overflow-x: scroll;
}

#2

Since you are using width:auto, the div will just use all the remaining space there is.
If you want to control the width of the "Permissons" column, you could use the grid system inside the table head like this:

由于您使用的是宽度：自动，因此div将使用所有剩余空间。如果要控制“Permissons”列的宽度，可以使用表头内部的网格系统，如下所示：

<thead>
<tr>
  <th class="col-md-2">Group ID</th>
  <th class="col-md-2">Name</th>
  <th class="col-md-8">Permissons</th>
</tr>
</thead>

#1

I think this will solve your problem. If you want the column to be shorter, set some width to parent td.

我想这会解决你的问题。如果希望列更短，请将某个宽度设置为父td。

.div-inside-td {
    height: 75px;
    max-width: 100%;
    overflow-x: scroll;
}

#2

由于您使用的是宽度：自动，因此div将使用所有剩余空间。如果要控制“Permissons”列的宽度，可以使用表头内部的网格系统，如下所示：

<thead>
<tr>
  <th class="col-md-2">Group ID</th>
  <th class="col-md-2">Name</th>
  <th class="col-md-8">Permissons</th>
</tr>
</thead>

秒客网

如何将td内的div宽度设置为父级？

2 个解决方案

#1

#2

#1

#2

相关文章