Question

我一直在寻找在<td>标记之间添加空格的方法。

我抓住了以下关于我要做的事情的图片：

但是我无法复制相同的结果。任何帮助将不胜感激。

＆＃13;

#sidebarright {
  float: right;
  width: 30%;
  padding: 0;
  margin: 0;
  padding-top: 20px;
}
#sidebarright a {
  color: grey;
}
.rightbuttons {
  background-image: url(./img/Resources_Button.jpg);
  background-repeat: no-repeat;
  padding: 14px 0 20px 11px;
}

＆＃13;

<div id="sidebarright">
  <a href="#"><img class="buttonUlti" src="img/Pro.jpg" alt="Pro" /></a>
  <table width="100%;">
    <tbody>
      <tr>
        <th class="resstyle">Resources</th>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Form.cfm"Forms</a></td>
        <td class="rightbuttons"><a href="Postings.cfm">Job Postings</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Locations.cfm">Locations</a></td>
        <td class="rightbuttons"><a href="Com.cfm">Comp</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Care.cfm">Care</a></td>
        <td class="rightbuttons"><a href="Photos.cfm">Photos</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Safety.cfm">Safety</a></td>
        <td class="rightbuttons"><a href="Directory.cfm">Directory</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Alerts.cfm">Alerts</a></td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 1

CSS中cellfeding和cellspacing的一般概念之前已得到回答：
Set cellpadding and cellspacing in CSS?

在您的具体情况下，我看到的一些问题：
1）标签'表'之前缺少一个闭合角括号 2）可以通过将border-spacing属性应用于表格元素来控制间距（为了近似模仿示例，使用单独的水平和垂直值
3）背景图像被切断所描述的问题是由于图像没有按照td单元的大小缩放。应用背景：宽度100％100％
4）使用填充来设置单元格宽度被添加到单元格内容的长度，导致更长的标签（作业发布）获得比左列的最长标签（位置）更多的宽度。使用宽度：50％将列宽设置为相等 5）为了不影响th，添加colspan =“2”（如Yasir回答）并将其设置为text-align：left with left padding-left：

我只粘贴了对css的修改

#sidebarright table {
  width: 100%;     /* moved from html  */
  border-spacing: 10px 15px;
}
.resstyle { padding-left: 10%; text-align: left; }
.rightbuttons {
  background-size: 100% 100%;
  width: 50%;
}

Answer 2

希望这可能有所帮助。

#sidebarright{
    float: right;
    width: 50%;
    padding: 0; margin:0;
    padding-top: 20px;
    }
    .rightbuttons{
    background-image: url(./img/Resources_Button.jpg);
    background-repeat:no-repeat;
    padding:  0 20px 20px 0;
    }
    .rightbuttons a{
    color:grey;
	border: 1px solid #999;
	display: block;
	padding: 10px 20px;
	text-decoration: none;
    }
    .resstyle{
	text-align: left;
    }
    .alerts-btn a{
	color: #F00;
    }

<div id="sidebarright">
            <table width="100%">
            	<thead>
                    <tr>
                        <th colspan="2" class="resstyle">Resources</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="rightbuttons"><a href="Form.cfm">Forms</a></td>
                        <td class="rightbuttons"><a href="Postings.cfm">Job Postings</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons"><a href="Locations.cfm">Locations</a></td>
                        <td class="rightbuttons"><a href="Com.cfm">Comp</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons"><a href="Care.cfm">Care</a></td>
                        <td class="rightbuttons"><a href="Photos.cfm">Photos</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons"><a href="Safety.cfm">Safety</a></td>
                        <td class="rightbuttons"><a href="Directory.cfm">Directory</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons alerts-btn"><a href="Alerts.cfm">Alerts</a></td>
                    </tr>
                </tbody>
            </table>
    </div>

空间表均匀均匀

2 个答案: