CSS延伸超出最大宽度

-3

我已经在两个位置设置了最大宽度，但表格继续延伸到远远超出这些值。我究竟做错了什么？CSS延伸超出最大宽度

样品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>

来源

2017-10-19 Rocco The Taco

请点击这里包括相关的源代码，这样您的网站更新后问题仍然是有用的，或见被脱机，等问] –

添加'显示：块; overflow：hidden;'到你的'table'元素 – Signo

寻求代码帮助的问题必须包含在问题本身**中再现它所需的最短代码**，最好在** Stack Snippet **中。虽然您提供了一个链接，但如果它变得无效，那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。请参阅[**我网站上的某些内容不起作用，我可以只粘贴一个链接**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-犯规，工作可以-I-刚刚糊一个链接到它）。 –

一个解决可能会设置一个ID为图像，并在设定的最大宽度为ID，因为从检查图像看来，你所设置的最大宽度似乎被推翻

像这样在html：

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

而且在CSS：

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

来源

2017-10-19 11:02:51 jcyl

的min-width/max-width属性适用于浮动和绝对定位块和inline-block元件，以及一些固有控件。它们不适用于非替换内联元素，例如表行和行/列组。（A“改为”元素有其内在的尺寸，如IMG或文本域）

您应该使用为table元素得到<td>的后裔max-width性质的工作。

table { 
    table-layout: fixed; 
}

来源

2017-10-19 11:08:46 Balwant

CSS延伸超出最大宽度

回答

相关问题