CSS表格内边距

Question

CSS表格内边距

6

我正在尝试在表格内应用正确的右边距，但没有成功。

<html>
  <style>
    input,select {
      width: 100%;
      margin-right: 15px;
      background: red;
    }
  </style>
  <body>
    <table border="2" color="red" width="100%">
       <tr>
         <td width="25%"><input type="text" /></td>
         <td width="25%"><select><option>foobar</option></select></td>
         <td width="25%"><input type="text" /></td>
         <td width="25%"><input type="text" /></td>
       </tr>
       <tr>
         <td width="25%"><input type="text" /></td>
         <td width="25%"><input type="text" /></td>
         <td width="25%"><select><option>foobar</option></select></td>
         <td width="25%"><input type="text" /></td>
       </tr>
    <table>
  </body>
</html>

例子: http://jsfiddle.net/3reat/

仅使用CSS，是否可以将这个边距定义为100% - 15px？

http://jsfiddle.net/3reat/2/

- Ragen Dazs

1

尝试使用CSS3的calc函数（例如）margin: calc(100%-15px)。 - Tamil Selvan C

你需要在哪里添加边距/填充？从外部表格？表格内部？单元格？请尽量具体些。 - pzin

@TamilSelvan 谢谢！创建一个答案，然后我会接受。 - Ragen Dazs

2

如果 calc() 对您来说没问题，那么请正确使用它，并加上空格：calc(100% - 15%)。 - pzin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tamil Selvan C · Accepted Answer

尝试使用CSS3 calc功能

（例如）

margin: calc(100% - 15px);
margin: -webkit-calc(100% - 15px);
margin: -moz-calc(100% - 15px);

参考文献: https://developer.mozilla.org/en-US/docs/CSS/calc

CSS 的 calc() 函数可用于动态计算样式属性。它可以使你在设置元素大小、位置和其他属性时更加灵活和精确。使用 calc() 函数，你可以将不同单位进行运算，如像素和百分比。此外，calc() 还可以通过指定数学运算符 (+, -, *, /) 来计算表达式中的值。