Fighting With Css To Make A Table With Different Heights And Colors

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: first row is 80 px height second row is 40 px height

Solution 1:

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;
}

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

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

.tabelaTresLinhasInternatr: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;
}

.tabelaTriplatr {
  padding: 40px;
  margin: 40px;
}

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

.tabelaTriplatd {
  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;
}

<tableclass="tabelaTripla"><tr><td><tableclass="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>

Solution 2:

The thing is that your styles for .tabelaTripla td are inherited by tds of the internal table.

So that:

1. minimal height of the first row is 80px, but inner content makes it bigger because of inherited padding: 40px
2. same reason for height. Background color applies but covers with background-color: #fdfdfd; from the rules mentioned above
3. it's all right here
4. same problem, vertical-align: middle; inherited from top-level td

Try to use more concrete and specific rules.

Solution 3:

padding is forcing the height of the cells... yo have to change the td display property in something like "display:block" but other modifications are needed.

By setting the padding of the inner table to zero, the height of the cell dosn't have a "minimum height"

.tabelaTripla .tabelaTresLinhasInterna td { padding:0px }

My advice is to use a grid system and you will get this thing in a responsive way and especially with less effort.

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

.tabelaTripla.tabelaTresLinhasInternatd {
  padding:0px
}

.tabelaTresLinhasInternatr {
padding: 0px;
margin: 0px;
word-wrap: break-word;
box-sizing:border-box;
}

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

.tabelaTresLinhasInternatr: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;
}

.tabelaTriplatr {
padding: 40px;
margin: 40px;
}

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

.tabelaTriplatd{
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;
}

<tableclass="tabelaTripla"><tr><td><tableclass="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>