Question

我在这两个位置设置了最大宽度，但表格继续远远超出这些值。我做错了什么？

示例CSS：

    #WADAPageTitleArea {
    /* width: 555px; */
}
#WADAPageTitleArea div, #WADAPageTitleArea p {
    font-size: 11px;
    padding-bottom: 7px;
}
#WADAPageTitleArea div#WADAPageTitle, #WADAPageTitle {
    font-size: 14px;
    font-weight: bold;
}

.WADAResults, .WADANoResults {
    border-top: 1px solid #AEBBC2;max-width:300px !important;
}
.WADAResultsNavigation {
    padding-top: 5px;
    padding-bottom: 10px;
}
.WADAResultsCount {
    font-size: 11px;
}
.WADAResultsNavTop, .WADAResultsInsertButton {
    clear: none;
}
.WADAResultsNavTop {
    width: 60%;
    float: left;
}
.WADAResultsInsertButton {
    width: 30%;
    float: right;
    text-align: right;
}
.WADAResultsNavButtonCell, .WADAResultsInsertButton {
  padding: 2px;
}
.WADAResultsTable {
    font-size: 11px;
    clear: both;
    padding-top: 1px;
    padding-bottom: 1px;
    max-width:300px !important;
}

.WADAResultsTableHeader, .WADAResultsTableCell {
  padding-right: 7px;
  padding-left: 7px;
    text-align: left;
}

.WADAResultsTableHeader {
    padding-left: 14px;
    padding-right: 14px;
}

.WADAResultsTableCell {
    padding-left: 7px;
    padding-right: 7px;
}

.WADAResultsTableCell {
  border-left: 1px solid #AEBBC2;
}

.WADAResultsEditButtons {
  border-left: 1px solid #AEBBC2;
  border-right: 1px solid #AEBBC2;
}

.WADAResultsRowDark {
  background-color: #DCE4ED;
}

表格代码：

 <table class="WADAResultsTable" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <th class="WADAResultsTableHeader" style="">Species:</th>
          </tr>
          <?php do { ?>
            <tr class="<?php echo $WARRT_AltClass1->getClass(true); ?>">
              <td class="WADAResultsTableCell" style="word-wrap:break-word"><strong><?php echo($row_WADAFL_Regs['Species']); ?></strong><br /><img style=" " src="/tides/florida-fish/images/<?php echo($row_WADAFL_Regs['Photo']); ?>" /><HR />
              Minimum Size Limits: <?php echo($row_WADAFL_Regs['Minimum_Size_Limits']); ?><BR />
              Closed Season: <?php echo($row_WADAFL_Regs['Closed_Season']); ?><BR />
              Daily Rec Bag Limit: <?php echo($row_WADAFL_Regs['Daily_Rec_Bag_Limit']); ?><BR />
              Remarks: <?php echo($row_WADAFL_Regs['Remarks']); ?></td>
            </tr>
          <?php } while ($row_WADAFL_Regs = mysql_fetch_assoc($WADAFL_Regs)); ?>
        </table>

Answer 1

一种解决方法是设置图像的id，并设置该id的最大宽度，因为此时，从检查图像开始，似乎已设置的最大宽度被否决

就像在HTML中一样：

<img id="fish-img" src="image.png">

在css中：

#fish-img {
  max-width: 300px;
}

Answer 2

min-width / max-width属性适用于浮点和绝对定位的块和inline-block元素，以及一些内在控件。它们不适用于未替换的内联元素，例如表行和行/列组。（“被替换”元素具有内在维度，例如img或textArea。）

您应该使用table-layout: fixed; table元素来获取max-width个后代的<td>属性。

table {
    table-layout: fixed;
}

CSS超出了max-width

2 个答案: