我的HTML代码
<div style="width: 75%; height: auto; min-height: 235px !important; float: left; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;">
<table style=" display: inline-block;margin-left: -4px;" class="blue-column-background step-eight-middle-table step-eight-table">
<tr class="each-table-row"><th class="each-table-column"><%= horse.feed_time %></th></tr>
<tr class="each-table-row"><th class="each-table-column"><%= horse.quantity %></th></tr>
<tr class="each-table-row"><th class="each-table-column"><%= horse.unit %></th></tr>
<tr class="each-table-row"><th class="each-table-column"><%= horse.feed_act %></th></tr>
<tr class="each-table-row"><th class="each-table-column"><%= horse.daily_feed_and_care_instruction %> <%= "this is to test this is to test this is to test" if ( i == 3 ) %></th></tr>
<tr class="each-table-row"><th class="each-table-column"><%= horse.location %></th></tr>
<tr class="each-table-row"><th class="each-table-column"><%= horse.assigned_user_id %></th></tr>
</table>
</div>
CSS
.step-eight-middle-table tr{
border-bottom: 1px solid #227BA6 !important;
font-weight: normal;
border-right: 1px solid #227BA6 !important;
padding-left: 4px;
max-width: 125px !important;
min-height: 30px !important;
width: auto;
height: auto;
}
对于此代码,尽管高度和宽度按预期工作,但min-height和max-width根本不起作用。为什么这些不起作用?
答案 0 :(得分:4)
你不能将min-height应用于table-cells,只需应用一个高度,如果需要,它会增长。
同样适用于max-width - 如果您需要最大宽度,则需要在表格单元格中放置一个div并将最大宽度添加到该
顺便说一下,你似乎是在tr上应用了一个最大宽度,那么为什么不为你的表设置100%的宽度并将最大宽度应用到你的容器div?