如何在html中为表中的一个td标签设置边距？

时间：2017-06-22 06:30:23

标签： html css

我正在尝试将margin-right属性设置为仅一个td标记，但无法实现。

table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

table,
th,[![enter image description here][1]][1]
td {
  border: 2px solid black;
}

.fixed {
  padding: 10px;
}

.line:after {
  content: ' ';
  display: block;
  border: 1px solid black;
}

.border {
  word-spacing: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: orange;
  border-radius: 5px;
  /*  border-style: solid;
 border-width: px; */
}

.fixed {
  padding: 10px;
}

.br {
  display: block;
}

.bold {
  font-weight: bold;
}

.border1 {
  word-spacing: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: red;
  border-radius: 5px;
  /*  border-style: solid;
 border-width: px; */
}

.border2 {
  word-spacing: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #bfbff2;
  border-radius: 5px;
  /*  border-style: solid;
 border-width: px; */
}

.border3 {
  word-spacing: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: skyblue;
  border-radius: 5px;
  /*  border-style: solid;
 border-width: px; */
}

.border4 {
  word-spacing: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: yellow;
  border-radius: 5px;
  /*  border-style: solid;
 border-width: px; */
}

.border5 {
  word-spacing: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #bfbfbf;
  border-radius: 5px;
  /*  border-style: solid;
 border-width: px; */
}

.boxed {
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 3px solid blue;
  margin: auto;
  border-radius: 10px;
}

.border6 {
  word-spacing: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: grey;
  border-radius: 5px;
  /*  border-style: solid;
 border-width: px; */
}

.right {
  margin-right: 20px;
}
<table border="0">
  <tr>
    <th class="text-center" colspan="4">Flight Puck</th>
  </tr>
  <tr>
    <th class="text-center">Behaviour</th>
    <th class="text-center">Description</th>
  </tr>
  <tr>
    <td class="fixed text-center"><span class="border bold">2210      924-16(267)     1030</span></td>
    <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span>
      <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p>
    </td>
  </tr>
  <tr>
    <td class="fixed text-center"><span class="border1 bold">2210      924-16(267)     1030</span></td>
    <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span>
      <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p>
    </td>
  </tr>
  <tr>
    <td class="fixed text-center"><span class="border2 bold">2210      924-16(267)     1030</span></td>
    <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span>
      <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p>
    </td>
  </tr>

  <tr>
    <td class="fixed text-center"><span class="border3 bold">2210      924-16(267)     1030</span></td>
    <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span>
      <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p>
    </td>
  </tr>

  <tr>
    <td class="fixed text-center"><span class="border4 bold">2210      924-16(267)     1030</span></td>
    <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span>
      <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p>
    </td>
  </tr>

  <tr>
    <td class="fixed text-center"><span class="border5 bold">1215|<span class="boxed">|CX</span>499-02(267)1737</span>
    </td>
    <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span>
      <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p>
    </td>
  </tr>

  <tr>
    <td class="fixed text-center"><span class="border6 bold">2210      924-16(267)     1030</span></td>
    <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span>
      <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p>
    </td>
  </tr>


  <tr>
    <td class="right fixed text-center"><span class="border6 bold">2210      924-16(267)     1030</span></td>
    <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span>
      <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p>
    </td>
  </tr>


</table>

SAmple image

2 个答案:

答案 0 :(得分：4)

表格单元格忽略了保证金规范。 请参阅http://www.w3.org/TR/CSS2/tables.html

答案 1 :(得分：0)

你可以尝试这样的事情。 只是一个快速构建的html + css来复制引导行为，需要更准确的css修复，但它是从一开始就有的。

我的建议仍然是使用bootstrap或其他类似的框架

<div class="table">
	<div class="row">
		<div class="col col25">col25</div>
		<div class="col col75">col75</div>
	</div>
	<div class="row">
		<div class="col col25">col25</div>
		<div class="col col75">col75</div>
	</div>
	<div class="row">
		<div class="col col25">col25</div>
		<div class="col col75">col75</div>
	</div>
	<div class="row">
		<div class="col col50">col50</div>
		<div class="col col50">col50</div>
	</div>
	<div class="row">
		<div class="col col50">col50</div>
		<div class="col col50">col50</div>
	</div>
	<div class="row">
		<div class="col col50">col50</div>
		<div class="col col50">col50</div>
	</div>
</div>
a = [1,2,3,4,5,6,7,8,9]
b, a = a.partition { |x| [1,3,5].include?(x) }

b # [1, 3, 5]
a # [2, 4, 6, 7, 8, 9]

相关问题
最新问题