CHROME&SAFARIで親divの幅いっぱいに収まらないテーブルを作ってしまいました。
これは Firefox では問題なく動作しますが、すべてのブラウザーで動作するようにしたいと考えています。
ここでいくつかのビューの後、一部のクロムのケースでは、親の div を次のように設定することで修正できることがわかりました...
display: block; width: 100%;
..しかし、問題は解決しません。
また、マージンとパディングを指定しない別のいくつかのケースが見つかったので、それを試してみましたが、それでも Chrome と Safari での表示に問題があります。
HTML
<div class='player_box info_pic_2'>
<div style='display: block; width: 100%;'>
<table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; top: 0; right: 0px; height: 30px;'>
<tr class='border_bottom'>
<td>CELL A</td>
<td>CELL B</td>
</tr>
</table>
<table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; right: 0px; top: 30px;'>
<tr class='border_bottom'>
<td>ROW A </td>
</tr>
<tr class='border_bottom'>
<td>ROW B </td>
</tr>
<tr class='border_bottom'>
<td>ROW C </td>
</tr>
<tr class='border_bottom'>
<td>ROW D </td>
</tr>
<tr class='border_bottom'>
<td>ROW E </td>
</tr>
<tr class='border_bottom'>
<td>ROW F </td>
</tr>
</table>
</div>
</div>
CSS
tr.border_bottom td {
border-bottom:1pt solid black;
}
.info_pic_2 {
position: absolute;;
height: 250px;
top: 130px;
right: 70px;
width: 350px;
max-width: 100%;
display: block;
border-style:solid;
border-width:5px;
color: black;
}
.player_box {
border:solid 4px #000000;
-moz-border-radius-topleft: 33px;
-moz-border-radius-topright:32px;
-moz-border-radius-bottomleft:32px;
-moz-border-radius-bottomright:32px;
-webkit-border-top-left-radius:33px;
-webkit-border-top-right-radius:32px;
-webkit-border-bottom-left-radius:32px;
-webkit-border-bottom-right-radius:32px;
border-top-left-radius:33px;
border-top-right-radius:32px;
border-bottom-left-radius:32px;
border-bottom-right-radius:32px;
text-align:center; background:#575757;
padding:100px 50px 100px 50px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.8;
}