htmlテーブルの2行の間に行やスペースを壊す方法

私のページが見栄えの良いように、スペースを入れたり、2つの行を分割する必要があります。htmlテーブルの2行の間に行やスペースを壊す方法

私のコードを見れば、テーブルの2つの行の間にスペースを作るために空の行と列がたくさんあります。

2行の間にスペースを入れてください。ここ

は私のサンプルコードです：

<tr>タグの属性を設定し margin

<form:form name="form" method="post" modelAttribute="Abatch"> 

<table> 
<tr> 
    <td>Please enter your comments</td> 
    <td><form:textarea id="textarea" style="width:150%;height:150%" path="Comments" size="255" readonly="false" /></td> 
</tr> 
<tr> 
<tr> 
<tr><td></td></tr> 
<tr><td></td></tr> 
<tr><td></td></tr> 
</tr> 
</tr> 
<tr>  
    <td><input id="button1" type="submit" name="submit" value="Approve"/></td> 
    <td><input id="button4" type="submit" name="submit" value="Reject"/></td> 

    </tr> 
</table>

出典

2013-09-25 Yellow Flash

あなたが行にパディングを追加するスタイルのタグを使用してみましたか？表形式のデータは、意図したとおりに実際に使用する必要があります。 –

CSSはあなたの友人です。 '

'を使ってレイアウトを提供しているようです。それは通常良い考えではありません。テーブルを使用する必要がある場合は、CSSスタイルを使用して目的のレイアウトを実現します。 –

答えて

間の行と0PX間隔の間に10pxの間隔を設定：

余白の値が表の行と表のセルに適用されない
を参照してください：http://www.w3.org/TR/CSS2/box.html#margin-properties

パディングとボーダーの値は、表の行に適用されますが、テーブルセルには適用されません
参照：http://www.w3.org/TR/CSS2/box.html#padding-properties

クイックフィックスは、あなたが分離する行の先頭にパディングを追加することです。例えば

：http://jsfiddle.net/audetwebdesign/caXsZ/

サンプルHTML：

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr class="row1"> 
     <td>Row One - 1</td> 
     <td>Row One - 2</td> 
    </tr> 
    <tr class="row2"> 
     <td>Row Two - 1</td> 
     <td>Row Two - 2</td> 
    </tr>  
</table>

はCSS：

td { 
    border: 1px dotted blue; 
} 
tr.row2 td { 
    padding-top: 40px; 
}

あなたがテーブルのセルの周りの境界線のスタイルを設定したい場合は、周りのラッパーを追加する必要がありますデザインの詳細に応じてコンテンツを適用し、罫線を適用します。

<tr> 
    <td> 
     Row 1 
    </td> 
</tr> 
<tr> 
    <td> 
     &nbsp; 
     <!--you just need a space in a row--> 
    </td> 
</tr> 
<tr> 
    <td> 
     Row 2 
    </td> 
</tr>

出典

2013-09-25 16:22:43

それは動作します！ありがとうございました –

助けてくれてうれしいです。答えを受け入れることを忘れないでください！ –

マージンを取らない。この解決策にwtsします –

：

<tr style="margin-top:10px;"></tr>

またはこのスタイルで、テーブル全体を作る：

<style> 
    table tr { 
     margin-top: 10px; 
    } 

    table tr:first-child { 
     margin-top: 0px; !important 
    } 
</style>

出典

2013-09-25 15:54:54

これは機能しません。CSSは、テーブル行の余白とパディングを無視します。 –

テーブルのスペースを与える正しい方法は、セルパッディングとセルスページングを使うことです。

<table cellpadding="4">

またはCSSを使用した：

<style type='text/css'>  
    table{ border-collapse: separate; } 
    table td { border-spacing: 1em; } 
</style>

出典

2013-09-25 15:54:55

これは機能しません。CSSは、テーブル行の余白とパディングを無視します。 –

ありがとう、それは編集されました –

border spacing attribute has to be specified in CSS 

table 
    { 
    border-collapse:separate; 
    border-spacing:10px 0px; 
    }

上記のコードは、CSSボックスモデルによれば、列

出典

2013-09-25 15:57:56 Sudharsun

が、このお試しください。

<tr> <td> <br> </td>  </tr>

出典

2014-05-27 19:57:50 MJ33

パーフェクト！共有してくれてありがとう.. – Xplora

これは、このように達成することができます。

出典

2016-03-14 11:59:42 anand24

htmlテーブルの2行の間に行やスペースを壊す方法

答えて

関連する問題