0

私のコード例:

<!DOCTYPE html>
<html>
<body>


<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>

</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>
    <table border="1">
        <tr>
            <td>
                test
            </td>
            <td>
                <table border="1">
                    <tr>
                        <td>
                            test
                        </td>
                        <td>    
                            wuut
                        </td>   
                    </tr>
                    <tr>
                        <td>
                            test1
                        </td>
                        <td>    
                            wuut1
                        </td>   
                    </tr>
                    <tr>
                        <td>
                            test2
                        </td>
                        <td>    
                            wuut2
                        </td>   
                    </tr>
                </table>
            </td>   
        </tr>
    </table>
  </td>
</tr>
</table>

</body>
</html>


<style>
    table {
        border-collapse: collapse;
    }
</style>

ここに貼り付けて、どのように見えるかを確認してください: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

私が必要とするのは、テーブルが互いに内側にある場合、テーブルの境界線が結合されていることです。データが分離されているテーブルのみ。

現時点では、テーブルの右下隅に 3 層の境界線がありますが、見栄えが悪いだけです。

私はCSSを使用してみました：

border-collapse: collapse;

しかし、これは境界線のセル間隔を削除しただけです:/

これは次のように見えるはずですが、これは colspan/rowspan を使用したもので、乱雑すぎます。

<!DOCTYPE html>
<html>
<body>


<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td colspan="3"> </td>
</tr>
<tr>
  <td rowspan="3">400</td>
  <td rowspan="3">500</td>
  <td rowspan="3">test</td>
  <td>test</td>
  <td>wuut</td>
</tr>
<tr>
  <td>test1</td>
  <td>test2</td>
</tr>
<tr>
  <td>wuut1</td>
  <td>wuut2</td>
</tr>
</table>

</body>
</html>
4

3 に答える 3

3

マークアップを生成するプログラム コードを変更して、属性をなくし、各セルの境界線を制御する要素の属性border=1があるようにします。この属性は、セルの選択された辺に境界線を設定する CSS 設定に対応します (例: CSS コード)。classtdclass<td class="left top">

.left { border-left-style: solid } 
.top { border-top-style: solid }

次のように、1 つのルールで設定できる境界線の幅と色:

td { border-width: 1px; border-color: #333; }

テーブルを含む各セルに設定する必要がtable { border-collapse: collapse }あり、おそらく設定する必要があります。padding: 0

于 2012-10-15T14:44:58.577 に答える
1

ネストされたテーブルの境界線が別々に描画されるため、少し注意が必要です。ただし、最新のブラウザーで目的の方法で動作するように、一部の CSS3 を使用して調整することができます。(古代のブラウザーでも効果を達成したい場合は、多くのclass属性を分散させる必要があります。)

テーブルを含む (少なくとも) セルからデフォルトのセル間隔を削除する必要があります。(内側と外側のテーブルの境界線の間隔は、セルの間隔に由来します。) CSS では、その子孫 (コンテンツ) によって要素を参照できないため、これには、 tda を含むそれぞれtableに適切なclass属性 (たとえば、 ) が必要です。class=containsTableさらに、ネストされたテーブルなどの最初の行のセルから上の境界線を選択的にオフにする必要があります。

.tableContainer { padding: 0; }
table table { border: none }
table table tr:first-child td { border-top: none; }
table table tr:last-child td { border-bottom: none; }
table table td:first-child { border-left: none; }
table table td:last-child { border-right: none; }
于 2012-10-15T14:26:58.707 に答える
0

<table style="border:0;">それがあなたの探しているものである場合は、境界線を表示しないようにしてください。たとえば、次のように表示する側を具体的に指定することもできます。

 <table style="border-left:1px solid black;">

スタイルborder-(left,right,bottom,top):「pixels」「borderの種類」「color」に入力できます。

<td style="border:0px;">
                            test
                        </td>
                        <td style="border:0px;">    
                            wuut
                        </td>   
                    </tr>

それらは表示されません。または、ID を付与して使用する<style type="text/css"> 

<style type="text/css">
#aa {border:0px;}
</style>

...

<td ID="aa">

... ID="aa" をそのループに追加できれば、機能するはずです。

于 2012-10-15T14:11:24.713 に答える