最小高度和最小宽度不起作用

时间:2014-04-03 08:01:54

标签: html css

我的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根本不起作用。为什么这些不起作用?

1 个答案:

答案 0 :(得分:4)

你不能将min-height应用于table-cells,只需应用一个高度,如果需要,它会增长。

同样适用于max-width - 如果您需要最大宽度,则需要在表格单元格中放置一个div并将最大宽度添加到该

顺便说一下,你似乎是在tr上应用了一个最大宽度,那么为什么不为你的表设置100%的宽度并将最大宽度应用到你的容器div?