堆棧內存溢出
  簡體   English   中英

CSS水平表格單元格間距：如何？

[英]CSS horizontal table cell spacing: how?

 原文  2009-03-17 21:59:00  4   9    javascript/ jquery/ html/ css/ layout

問題描述

希望這是一個簡單的，但我還沒有找到解決方案。 我想在表格的列之間放置空格。

例 

| Cell |<- space ->| Cell |<- space ->| Cell |

重要的一點是我不希望邊緣有空間。 有一個border-spacing屬性，但在IE（6或7）中不支持，所以這是不好的。 它還在邊緣放置空間。

我提出的最好的方法是將padded-right：10px放在我的表格單元格上，並在最后一個單元格中添加一個類來刪除填充。 這不太理想，因為額外的空間是細胞的一部分而不是它的外部。 我想你可以用透明邊框做同樣的事情嗎？

我也嘗試過使用jQuery： 

$(function() {
  $("table > tbody > tr:not(:last-child").addClass("right-padding");
});

但即使在只有大約100行的桌子上，在某些情況下這需要200-400ms，這太慢了。

任何幫助贊賞。

謝謝

對於那些暗示列不起作用的人。 試試這個： 

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    table { border: 1px solid black; }
    td { background: yellow; }
  </style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>
</body>
</html>

9 個解決方案

解決方案1
 20  2009-03-18 20:58:15

如何為每個表格單元格提供透明邊框？ 我很確定這會為你做... 

table td {
  border:solid 5x transparent;
}

你只能這樣水平地應用它...... 

table td {
  border-left:solid 10px transparent;
}
table td:first-child {
  border-left:0;
}

這是我相信你想要完成的一個完整的工作演示...... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      table {
        border: 1px solid black;
      }

      table td {
        background: yellow;
        border-left:solid 10px transparent;
      }

     table td:first-child {
       border-left:0;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

我不相信IE6支持CSS：first-child，所以這里有一個解決方法...... 

<!–-[if IE 6]>
<style type="text/css">
  table td {
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
  }
</style>
<![endif]-->

解決方案2
 11  2012-03-05 15:21:49

它可能是你在尋找什么：

您可以使用兩個值：第一個是水平單元格間距，第二個是垂直單元格間距。 

<table style="border-spacing: 40px 10px;">

解決方案3
 8  2009-03-17 22:07:16

嘗試使用col

例 

<table>
    <col style="padding-right:20px;" />
    <col style="padding-right:30px;" />
    <col />
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

cols也支持類:)

希望這可以幫助

達科

編輯：澄清col是在表的頂部聲明的元素，以影響整個列。 第一個col元素將影響第一列，第二個col =第二列，依此類推。 如果您希望將相同的樣式分配給多個列，則可以將它們分組到colgroup中。

編輯2：經過一些研究后發現，你可以在col元素上設置的唯一可靠的樣式是：

  • 邊界
  • 背景
  • 寬度
  • 能見度

沒有邊距或填充。 開溜！ 設置列的寬度是否明確解決了您的問題？

解決方案4
 2  2009-03-17 22:10:43

您還可以考慮使用一系列帶有邊距的左側浮動的固定寬度div。 這可能會讓您對元素樣式有更多的控制。 

.row div {
     margin-right: 10px;
     float: left;
     width: 50px;
}

    <div class="row">
        <div>Cell One</div>
        <div>Cell Two</div>
        <div>Cell Three</div>
    </div>

解決方案5
 2  2012-01-06 15:20:36

如果你的細胞周圍已經有邊框，就像我一樣，Josh的答案不起作用。

我通過使用“position：relative; left：-10px”將整個表稍微向左移動來解決問題。 我把它與桌面上的cellspacing結合起來。 

<div id='sandbox'>
    <table cellspacing='10'>
          <tr>
                <td class='smoothBox'>
                    ...
                </td>
                <td class='smoothBox'>
                    ...
                </td>
          </tr>
    </table>
</div>

和css： 

#sandbox {
    float: left;
    position: relative; /* move the whole sandbox */
    left: -11px;        /* slightly to the left */
    width: 950px;
    margin-top: 0px;
    padding: 1px;
    text-align: left;
}
#sandbox table {
    float: left;
    width: 100%;
}
#sandbox td {
    width: 300px;
    vertical-align: top;
}

這對我有用，我希望它對你也有幫助。

解決方案6
 1  2015-01-25 09:47:41

這對我有用

border-collapse: separate; border-spacing: 0px 3px;

解決方案7
 1  2009-03-17 22:06:51

你嘗試過使用col分組嗎？ 

<table>
    <colgroup>
        <col class="right-padding" />
        <col class="right-padding" />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

解決方案8
 0  2009-03-18 07:01:58

那么只添加一個用作間隔物的空單元呢？ 您可以使用上面所述的col-tag為空單元格提供一定的寬度 

<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
</tr>

或者如果你想用它們做更多的事情，只需要為它們添加類而不是使用內聯樣式...

解決方案9
 -1  2011-07-14 13:58:41

Josh的答案相當不錯，但在我看來，這種方式很復雜。 將表格邊框設置為“隱藏”並將折疊模式設置為“折疊”時，將根據需要消除列外邊緣上的邊框。

工作范例：

樣式表： 

table#my_table  {
    border-collapse: collapse;
    border-style: hidden;
}

table#my_table td {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

HTML： 

<table id="my_table">
   <tr>
     <td>A1</td>
     <td>A2</td>
     <td>A3</td>
   </tr>
   <tr>
     <td>B1</td>
     <td>B2</td>
     <td>B3</td>
   </tr>         
</table>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何自動滾動到水平表格中的特定表格單元格 在表格單元格邊框間距 CSS 中可以看到隱藏的行/列 隱藏表格單元格內容而不破壞間距 如何根據條件將CSS應用於表格單元格 如何將CSS類設置為表標題單元格 使用CSS / Javascript / JQuery間距表格單元格 國際象棋表間距 - HTML,CSS, JS 根據垂直和水平標題突出顯示表格單元格 CSS 表格樣式 - 表格中心邊框之間的間距 使用CSS或JavaScript將表行水平對齊
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM