1

この質問は、CSS: Make a block element fill the whole space of a parent element? で以前に尋ねられました (そして回答されました) 。

ただし、受け入れられたソリューションはCHROMEでは機能しません（メルカトールによるコメントに記載されているように）。<tr> 要素に height:100 を追加することを提案する修正も機能しません。Webkit ベースのブラウザーでこの効果を達成する方法を知っている人はいますか? リンクhttp://dl.getdropbox.com/u/26620/stackoverflow1.html (元の投稿者が提供) は、この問題を示しています。FF/IE では動作しますが、chrome では動作しません。

ありがとう。

4

1 に答える 1

1

私はChromeでこれを試してみましたが、うまくいくようです: http://apptools.com/examples/tdcolor.php

css は次のとおりです (test.css と呼びます)。

table.navbar {
   border-collapse: collapse;
}
table.navbar td {
   border: 1px solid #ccc;
}
table.navbar td a{
   display: block;
   width: 9em;
   padding: 3px;
   text-decoration: none;
}
table.navbar td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #fff;
}
table.navbar td a:hover, table.navbar td a:active {
   color: #fff;
   background-color: #666;
}

サンプルの html ファイル (パスを test.css ファイルに変更することを忘れないでください):

<html>
<head>
<link rel='stylesheet' href='CHANGE PATH TO YOUR test.css' type='text/css' media='all' />
</head>
<body>
<p><strong>Example:</strong></p>

<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><table border=0 cellspacing=0 cellpadding=0 class=navbar>
<tr>
<td class=navbar><a href="javascript:void(0);">First that is very, very, long to make sure that everything is working correctly <b 

style="color:black;background-color:#a0ffff">Link</b></a></td>
</tr>
<tr>
<td class=navbar><a href="javascript:void(0);">Another <b style="color:black;background-color:#a0ffff">Link</b></a> </td>
</tr>
<tr>
<td class=navbar><a href="javascript:void(0);">A Third <b style="color:black;background-color:#a0ffff">Link</b></a> </td>

</tr>
</table></td>
<td valign=top class=othercontent><p>Other content goes here.</p></td>
</tr>
</table>

</body>
</html>

それはあなたのために働きますか？

于 2011-01-10T10:09:33.627 に答える