【问题标题】:How to style table with only vertical cell spacing?如何设置只有垂直单元格间距的表格?
【发布时间】:2010-08-12 10:28:12
【问题描述】:

我的 HTML 中有一个表格,但我只想要垂直间距,因为水平 25px 看起来不正确。我在 HTML 中看不到执行此操作的属性,这可能吗?
提前致谢,
院长

编辑: 我有一张表格,其单元格间距一直为 25 像素。我只想要 25px 的垂直单元格间距。

【问题讨论】:

  • 我不明白。能改一下吗?
  • 看看我的编辑,我希望这让它更容易理解。

标签: html html-table


【解决方案1】:

cellpadding 属性(我假设您正在谈论)只会采用一个数字并将其用作单元格壁和内容之间的像素。您必须想出一个解决方法,根据您的布局,您可能想要使用<div>,或者如果单元格周围没有任何边框,您可以添加style='padding-bottom:25px' 以创建相同的效果.

【讨论】:

    【解决方案2】:

    只需在

    部分中添加以下内容,就在页面的 head 标签打开之后: 这应该可以完成工作:
    <style type="text/css">
    td { margin: 25px 0px; } /* tells the table to have 25 
    px on top and bottom, zero px on left and right */
    </style>
    

    【讨论】:

      【解决方案3】:

      Cleaner &lt;table&gt; 元素解决方案(对内联样式很有用)。

      table {
        border-collapse: separate;
        border-spacing: 0 20px;
      }
      
      th {
        background-color: blue;
        color: white;
      }
      
      th, td {
        width: 150px;
        border: 1px solid black;
        padding: 5px;
      }
      <table>
        <tbody>
          <tr>
            <th>Vehicle     <th>No. of Wheels  <th>Rep (0-10)
          <tr>
            <td>Skateboard  <td>4              <td>7
          <tr>
            <td>BMX         <td>2              <td>6
          <tr>
            <td>Unicycle    <td>1              <td>-1

      【讨论】:

        【解决方案4】:

        我发现了这个:

        border-bottom: 25px solid transparent;
        

        注意 IE6 has a problem with transparency.

        【讨论】:

          猜你喜欢
          • 2017-10-18
          • 2012-07-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-01-20
          • 2016-03-15
          • 2017-07-12
          • 2016-09-19
          相关资源
          最近更新 更多