CSSが最大幅を超えて広がっています

Question

ここでは最大幅を2か所に設定しましたが、テーブルはこれらの値をはるかに超えています。私は間違って何をしていますか？

サンプル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など固有の寸法を、持っています。）

あなたが仕事に<td>の子孫のmax-widthプロパティを取得するためにtable要素にを使用する必要があります。

table { 
    table-layout: fixed; 
}