与CSS战斗，使不同高度和颜色的桌子 [英] Fighting with CSS to make a table with different heights and colors

问题描述

我有一个3列的表。

每列中都有一个3行的表。

我想让这个第二个表格像这样：

1. 第一行为80像素高


2. 第二行为40像素高，黑色背景。


3. 第三行具有可变高度


4. 此表格必须垂直对齐。不是这样。它与中心垂直对齐。这意味着内部表格位于外部表格的单元格的垂直中心。

所以，这是代码：

>

.tabelaTresLinhasInterna {border：0px; table-layout：fixed; font-size：0.9em; line-height：1.5em; text-align：center; margin：0 auto auto auto;} tabelaTresLinhasInterna tr {padding：0px; margin：0px; word-wrap：break-word;}。 tabelaTresLinhasInterna tr：nth-​​child（1）{height：80px;}。tabelaTresLinhasInterna tr：nth-​​child（2）{background-color：＃000; height：40px;}。tabelaTresLinhasInterna tr：nth-​​child（3）{height ：auto;}。tabelaTripla {border：0px;表格布局：固定; width：100％border-collapse：separate; border-spacing：20px; font-size：0.7em; line-height：1.3em; background-color：#fafafa;}。tabelaTripla tr {padding：40px; margin：40px ;}。tabelaTripla th，td {border：0px; tabelaTripla td {border：0px; width：33％; text-align：center; vertical-align：middle; word-wrap：break-word; padding：40px; border：1px solid #eaeaea; border-radius：20px; background-color：#fdfdfd;}

< table class =tabelaTripla> < TR> < TD> < table class =tabelaTresLinhasInterna> < tr>< td> INTERNAL TABLE LINE 1< / td>< / tr> < tr>< td> INTERNAL TABLE LINE 2< / td>< / tr> < tr>< td> INTERNAL TABLE LINE 3< / td>< / tr> < /表> < / TD> < td> COLUMN 2< / td> < td> COLUMN 3< / td> < / tr>< / table>

忽略CSS ...

解决方案

添加 vertical-align：top; 添加到外部表 td 。

对于行高，将高度应用于 td 而不是 tr ，即 .tabelaTresLinhasInterna tr：nth-​​child（1）td {height：80px ; } 。

。 tabelaTresLinhasInterna {border：0px;表格布局：固定; font-size：0.9em; line-height：1.5em; text-align：center; margin：0 auto auto auto;}。tabelaTresLinhasInterna tr {padding：0px; margin：0px; （1）td {height：80px;}。tabelaTresLinhasInterna tr：nth-​​child（2）td {background-color：＃000; height：40px;}。tabelaTripla {border：0px;表格布局：固定;宽度：100％;边界崩溃：分开; border-spacing：20px; font-size：0.7em;行高：1.3em; background-color：#fafafa;}。tabelaTripla tr {padding：40px; margin：40px;}。tabelaTripla th，td {border：0px; width：33％;}。tabelaTripla td {border：0px;宽度：33％; text-align：center; vertical-align：top;单词包装：分词;填充：40px; border：1px solid #eaeaea; border-radius：20px; background-color：#fdfdfd;}

< table class = tabelaTripla > < TR> < TD> < table class =tabelaTresLinhasInterna> < TR> < td> INTERNAL TABLE LINE 1< / td> < / TR> < TR> < td> INTERNAL TABLE LINE 2< / td> < / TR> < TR> < td> INTERNAL TABLE LINE 3< / td> < / TR> < /表> < / TD> < td> COLUMN 2< / td> < td> COLUMN 3< / td> < / table>

I have a table with 3 columns.

Inside every column there is a table with 3 lines.

I want to make this second table like this:

1. first row is 80 px height
2. second row is 40 px height and has a black background.
3. third row has variable height
4. This table must be vertically aligned to top. It is not. It is vertically aligned to center. Meaning the internal table is at the vertical center of the cell of the outside table.

So, this is the code:

.tabelaTresLinhasInterna {
border: 0px;
table-layout: fixed;
font-size: 0.9em;
line-height: 1.5em;
text-align: center;
margin:0 auto auto auto;
}


.tabelaTresLinhasInterna tr {
padding: 0px;
margin: 0px;
word-wrap: break-word;
}

.tabelaTresLinhasInterna tr:nth-child(1) {
height:80px;
}
.tabelaTresLinhasInterna tr:nth-child(2) {
   	background-color: #000;
height:40px;
}

.tabelaTresLinhasInterna tr:nth-child(3) {
height:auto;
}


.tabelaTripla {
border: 0px;
	table-layout: fixed;
	width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
background-color: #fafafa;
}

.tabelaTripla tr {
padding: 40px;
margin: 40px;
}

.tabelaTripla th, td{
border: 0px;
	width: 33%;
}

.tabelaTripla td{
border: 0px;
width: 33%;
text-align: center;
vertical-align: middle;
word-wrap: break-word;
padding: 40px;
border: 1px solid #eaeaea;
border-radius: 20px;
background-color: #fdfdfd;
}

<table class="tabelaTripla">
  <tr>
    <td>

      <table class="tabelaTresLinhasInterna">
        <tr><td>INTERNAL TABLE LINE 1</td></tr>
        <tr><td>INTERNAL TABLE LINE 2</td></tr>
        <tr><td>INTERNAL TABLE LINE 3</td></tr>
      </table>
  </td>
    <td>COLUMN 2</td>
    <td>COLUMN 3</td>
  </tr>
</table>

The internal table is ignoring the CSS...

解决方案

Add vertical-align: top; to the outer table's td.

For the row heights, apply the height to the td instead of the tr, i.e. .tabelaTresLinhasInterna tr:nth-child(1) td { height:80px; }.

.tabelaTresLinhasInterna {
  border: 0px;
  table-layout: fixed;
  font-size: 0.9em;
  line-height: 1.5em;
  text-align: center;
  margin: 0 auto auto auto;
}

.tabelaTresLinhasInterna tr {
  padding: 0px;
  margin: 0px;
  word-wrap: break-word;
}

.tabelaTresLinhasInterna tr:nth-child(1) td {
  height: 80px;
}

.tabelaTresLinhasInterna tr:nth-child(2) td {
  background-color: #000;
  height: 40px;
}

.tabelaTripla {
  border: 0px;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 20px;
  font-size: 0.7em;
  line-height: 1.3em;
  background-color: #fafafa;
}

.tabelaTripla tr {
  padding: 40px;
  margin: 40px;
}

.tabelaTripla th,
td {
  border: 0px;
  width: 33%;
}

.tabelaTripla td {
  border: 0px;
  width: 33%;
  text-align: center;
  vertical-align: top;
  word-wrap: break-word;
  padding: 40px;
  border: 1px solid #eaeaea;
  border-radius: 20px;
  background-color: #fdfdfd;
}

<table class="tabelaTripla">
  <tr>
    <td>

      <table class="tabelaTresLinhasInterna">
        <tr>
          <td>INTERNAL TABLE LINE 1</td>
        </tr>
        <tr>
          <td>INTERNAL TABLE LINE 2</td>
        </tr>
        <tr>
          <td>INTERNAL TABLE LINE 3</td>
        </tr>
      </table>
    </td>
    <td>COLUMN 2</td>
    <td>COLUMN 3</td>
  </tr>
</table>

这篇关于与CSS战斗，使不同高度和颜色的桌子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！