html - top - table text align




在CSS中設置cellpadding和cellspacing? (18)

在HTML表格中, cellpaddingcellspacing可以設置如下:

<table cellspacing="1" cellpadding="1">

如何使用CSS完成同樣的工作?


默認

瀏覽器的默認行為等效於:

table {border-collapse: collapse;}
td    {padding: 0px;}

CELLPADDING

設置單元格內容與單元格牆之間的間距

table {border-collapse: collapse;}
td    {padding: 6px;}

CELLSPACING

控製表格單元格之間的空間

table {border-spacing: 2px;}
td    {padding: 0px;}

table {border-spacing: 2px;}
td    {padding: 6px;}

兩者(特別)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

注意:如果設置了border-spacing ,則表示表的border-collapse屬性是separate

親自嘗試一下!

Here你可以找到實現這一目標的舊html方式。


CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

只需將CSS填充規則與表數據一起使用:

td { 
    padding: 20px;
}

對於邊界間距:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

但是,由於盒子模型的差異化實現,它可能會在Internet Explorer等舊版本的瀏覽器中產生問題。


基本

為了控制CSS中的“cellpadding”,您可以簡單地在表格單元格上使用padding 。 例如10px的“cellpadding”:

td { 
    padding: 10px;
}

對於“cellspacing”,您可以將border-spacing CSS屬性應用於表。 例如10px的“cellspacing”:

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

這個屬性甚至可以允許單獨的水平和垂直間距,這是舊學校“cellspacing”無法做到的。

IE中的問題<= 7

這將適用於幾乎所有流行的瀏覽器,除了Internet Explorer通過Internet Explorer 7,你幾乎沒有運氣。 我說“差不多”因為這些瀏覽器仍然支持border-collapse屬性,它合併了相鄰表格單元格的邊框。 如果你試圖消除cellspacing(即cellspacing="0" ),那麼border-collapse:collapse應該具有相同的效果:表格單元格之間沒有空格。 但是,這種支持是錯誤的,因為它不會覆蓋表元素上的現有cellspacing HTML屬性。

簡而言之:對於非Internet Explorer 5-7瀏覽器, border-spacing處理您。 對於Internet Explorer,如果您的情況恰到好處(您希望0個cellspacing並且您的表尚未定義它),則可以使用border-collapse:collapse

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

注意:有關可以應用於表和哪些瀏覽器的CSS屬性的概述,請參閱這個奇妙的Quirksmode頁面


在HTML表格中, cellpaddingcellspacing可以設置如下:

對於Cell-Padding :只需調用簡單的td/th單元格padding

EX:

/******Call-Padding**********/

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}
<table>
		<tr>
			<th>Head1 </th>
			<th>Head2 </th>
			<th>Head3 </th>
			<th>Head4 </th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

對於細胞間距

只需調用簡單的table border-spacing

EX:

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}
<table>
		<tr>
			<th>Head1</th>
			<th>Head2</th>
			<th>Head3</th>
			<th>Head4</th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}

通過CSS源鏈接更多表格樣式, 您可以通過css獲得更多表格樣式


在邊界崩潰之後,我使用了!important

border-collapse: collapse !important;

它在IE7中適用於我。 它似乎覆蓋了cellspacing屬性。


對於表格cellspacing和cellpadding在HTML 5中已經過時。現在對於cellspacing,你必須使用border-spacing。對於cellpadding,你必須使用border-collapse。

並確保您不在HTML5代碼中使用它。 始終嘗試在CSS-3文件中使用這些值。


對於那些想要非零單元間距值的人來說,下面的CSS對我有用,但我只能在Firefox中測試它。 有關兼容性詳細信息,請參閱其他位置發布Quirksmode鏈接。 似乎它可能不適用於較舊的Internet Explorer版本。

table {
    border-collapse: separate;
    border-spacing: 2px;
}

您可以使用CSS填充屬性輕鬆地在表格單元格內設置填充,這是產生與表格的cellpadding屬性相同效果的有效方法。

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

同樣,您可以使用CSS border-spacing屬性來應用相鄰表格單元格邊框之間的間距,例如cellspacing屬性。 但是,為了處理邊界間距,border-collapse屬性值的值是獨立的,這是默認的。

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>


據我所知,設置表格單元格的邊距並沒有任何影響。 cellspacing的真正CSS等價物是border-spacing - 但它在Internet Explorer中不起作用。

您可以使用border-collapse: collapse來將單元格間距可靠地設置為0,如上所述,但對於任何其他值,我認為唯一的跨瀏覽器方式是繼續使用cellspacing屬性。


此hack適用於Internet Explorer 6及更高版本, Google Chrome ,Firefox和Opera

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

*聲明適用於Internet Explorer 6和7,其他瀏覽器將正確忽略它。

expression('separate', cellSpacing = '10px')返回'separate' ,但兩個語句都在運行,因為在JavaScript中你可以傳遞比預期更多的參數,並且所有參數都將被評估。


此外,如果您想要cellspacing="0" ,請不要忘記在table的樣式表中添加border-collapse: collapse


用div包裝單元格的內容,你可以做任何你想做的事情,但你必須將每個單元格包裝在一列中以獲得統一的效果。 例如,要獲得更寬的左右邊距:

所以CSS將是,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}
<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

是的,這很麻煩。 是的,它適用於IE。 事實上,我只是用IE測試過這個,因為這是我們允許在工作中使用的全部內容。


試試這個:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

或試試這個:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

可以通過CSS中cell-padding來給出cell-spacing padding ,而可以通過設置表格的border-spacing來設置cell-spacing

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle


table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}

td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

如果margin不起作用,嘗試將tr display設置為block ,然後保證金將起作用。





alignment