fsbmat
Reputation: 301
Overlapping tables in HTML and CSS
I am creating tables to share links of interest with my students. I do this using RMarkdown in RStudio and GitHub. The tables are in an HTML format and I determine the style of the tables using CSS. There are four tables that I would like to place in four quadrants. However, the first two are side by side in the correct way and the last two (from quadrants 3 and 4) overlap, see this link. How to fix this error?
The main file can be found at this link.
table.table-style-two {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #3A3A3A;
border-collapse: collapse;
}
table.table-style-two th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #517994;
background-color: #B2CFD8;
}
table.table-style-two tr:hover td {
background-color: #DFEBF1;
}
table.table-style-two td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #517994;
background-color: #ffffff;
}
.floatLeft {
width: 50%;
float: left;
}
.floatRight {
width: 50%;
float: right;
}
.container {
overflow: hidden;
}<!--Tabelas de Cursos e Webinarios-->
<div class="container">
<div class="floatLeft">
<!-- Table goes in the document BODY -->
<!-- Tabela 1 (Cursos) -->
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Cursos </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> Cursos Diversos </center>
</td>
<td>
<center> <a href=" http://veduca.org/ " target="_blank"> Veduca </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> Ciência de Dados </center>
</td>
<td>
<center> <a href=" https://www.datascienceacademy.com.br/ " target="_blank"> Data Science Academy </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> Programação </center>
</td>
<td>
<center> <a href=" https://medium.com/lambda-school-blog " target="_blank"> Lambda </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
</div>
<div class="floatRight">
<tr>
<!-- Table goes in the document BODY -->
<!-- Tabela 2 (Webinários) -->
<!--Substituir A partir daqui-->
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Webinários </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://www.youtube.com/watch?v=_-DGDNepTno&feature=youtu.be " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/_-DGDNepTno " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/lYqEw_VZqV4 " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
<!--Substituir ate a linha anterior-->
<br>
<br>
<!--Tabelas de Cursos e Webinarios-->
<div class="container">
<div class="floatLeft">
<!-- Table goes in the document BODY -->
<!-- Tabela 1 (Cursos) -->
<!--Substituir A partir daqui-->
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Cursos </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> Cursos Diversos </center>
</td>
<td>
<center> <a href=" http://veduca.org/ " target="_blank"> Veduca </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> Ciência de Dados </center>
</td>
<td>
<center> <a href=" https://www.datascienceacademy.com.br/ " target="_blank"> Data Science Academy </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> Programação </center>
</td>
<td>
<center> <a href=" https://medium.com/lambda-school-blog " target="_blank"> Lambda </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 4 </center>
</td>
<td>
<center> Programação </center>
</td>
<td>
<center> <a href=" https://www.codeavengers.com/ " target="_blank"> Code Avenger </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
<!--Substituir ate a linha anterior-->
</div>
<div class="floatRight">
<tr>
<!-- Table goes in the document BODY -->
<!-- Tabela 2 (Webinários) -->
<!--Substituir A partir daqui-->
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Webinários </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://www.youtube.com/watch?v=_-DGDNepTno&feature=youtu.be " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/_-DGDNepTno " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/lYqEw_VZqV4 " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 4 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/8PYG89fD8jQ " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>Upvotes: 0
Views: 117
Answers (3)
fsbmat
Reputation: 301
I modified my code and managed to solve the problem, here is my solution:
<style type="text/css" rel="stylesheet">
table.table-style-two {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #3A3A3A;
border-collapse: collapse;
margin: 0;
}
table.table-style-two th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #517994;
background-color: #B2CFD8;
}
table.table-style-two tr:hover td {
background-color: #DFEBF1;
}
table.table-style-two td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #517994;
background-color: #ffffff;
}
.floatLeft {
width: 50%;
float: left;
}
.floatRight {
width: 50%;
float: right;
}
.container {
overflow: hidden;
}
</style><div id="Div1" style="width: 50%;height: 30px;float: left;">
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Cursos </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> Cursos Diversos </center>
</td>
<td>
<center> <a href=" http://veduca.org/ " target="_blank"> Veduca </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> Ciência de Dados </center>
</td>
<td>
<center> <a href=" https://www.datascienceacademy.com.br/ " target="_blank"> Data Science Academy </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> Programação </center>
</td>
<td>
<center> <a href=" https://medium.com/lambda-school-blog " target="_blank"> Lambda </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
</div>
<div id="Div2" style="width: 50%;height: 30px;float: left;">
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Webinários </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://www.youtube.com/watch?v=_-DGDNepTno&feature=youtu.be " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/_-DGDNepTno " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/lYqEw_VZqV4 " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="Div3" style="width: 50%;height: 30px;float: right;">
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Webinários </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://www.youtube.com/watch?v=_-DGDNepTno&feature=youtu.be " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/_-DGDNepTno " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/lYqEw_VZqV4 " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
</div>
<div id="Div4" style="width: 50%;height: 30px;float: right;">
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Cursos </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> Cursos Diversos </center>
</td>
<td>
<center> <a href=" http://veduca.org/ " target="_blank"> Veduca </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> Ciência de Dados </center>
</td>
<td>
<center> <a href=" https://www.datascienceacademy.com.br/ " target="_blank"> Data Science Academy </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> Programação </center>
</td>
<td>
<center> <a href=" https://medium.com/lambda-school-blog " target="_blank"> Lambda </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
</div>Upvotes: 0
FluffyKitten
Reputation: 14312
The problem is that your divs are nested incorrectly - table 3 is inside the floated div for table 2.
Also FYI your HTML is invalid - you are not closing div tags
Here is the correctly nested version (although it might be worth looking into grids instead of using floats):
UPDATE: Added comments to make it easier to find the lines to be changed
table.table-style-two {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #3A3A3A;
border-collapse: collapse;
margin: 0;
}
table.table-style-two th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #517994;
background-color: #B2CFD8;
}
table.table-style-two tr:hover td {
background-color: #DFEBF1;
}
table.table-style-two td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #517994;
background-color: #ffffff;
}
.floatLeft {
width: 50%;
float: left;
}
.floatRight {
width: 50%;
float: right;
}
.container {
overflow: hidden;
}<!--Tabelas de Cursos e Webinarios-->
<div class="container">
<div class="floatLeft">
<!-- Table goes in the document BODY -->
<!-- Tabela 1 (Cursos) -->
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Cursos </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> Cursos Diversos </center>
</td>
<td>
<center> <a href=" http://veduca.org/ " target="_blank"> Veduca </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> Ciência de Dados </center>
</td>
<td>
<center> <a href=" https://www.datascienceacademy.com.br/ " target="_blank"> Data Science Academy </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> Programação </center>
</td>
<td>
<center> <a href=" https://medium.com/lambda-school-blog " target="_blank"> Lambda </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
</div>
<div class="floatRight">
<tr>
<!-- Table goes in the document BODY -->
<!-- Tabela 2 (Webinários) -->
<!--Substituir A partir daqui-->
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Webinários </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://www.youtube.com/watch?v=_-DGDNepTno&feature=youtu.be " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/_-DGDNepTno " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/lYqEw_VZqV4 " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
<!--Substituir ate a linha anterior-->
</div> /* 1. CLOSE FIRST floatRight HERE */
</div> /* 2. CLOSE FIRST container HERE */
<br>
<br>
/* 3. NOW THIS ISN'T INSIDE TABLE 2'S floatRight DIV ANYMORE SO IT WILL FLOAT OVER TO THE LEFT, UNDER TABLE 1 */
<div class="container">
<!--Tabelas de Cursos e Webinarios-->
<div class="floatLeft">
<!-- Table goes in the document BODY -->
<!-- Tabela 1 (Cursos) -->
<!--Substituir A partir daqui-->
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Cursos </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> Cursos Diversos </center>
</td>
<td>
<center> <a href=" http://veduca.org/ " target="_blank"> Veduca </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> Ciência de Dados </center>
</td>
<td>
<center> <a href=" https://www.datascienceacademy.com.br/ " target="_blank"> Data Science Academy </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> Programação </center>
</td>
<td>
<center> <a href=" https://medium.com/lambda-school-blog " target="_blank"> Lambda </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 4 </center>
</td>
<td>
<center> Programação </center>
</td>
<td>
<center> <a href=" https://www.codeavengers.com/ " target="_blank"> Code Avenger </a> </center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
<!--Substituir ate a linha anterior-->
</div>
<div class="floatRight">
<tr>
<!-- Table goes in the document BODY -->
<!-- Tabela 2 (Webinários) -->
<!--Substituir A partir daqui-->
<table class="table-style-two">
<thead>
<tr>
<th colspan="4">
<center> Webinários </center>
</th>
</tr>
<tr>
<th>
<center> Quantidade </center>
</th>
<th>
<center> Descrição </center>
</th>
<th>
<center> Links </center>
</th>
<th>
<center> Observações </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center> 1 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://www.youtube.com/watch?v=_-DGDNepTno&feature=youtu.be " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 2 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/_-DGDNepTno " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 3 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/lYqEw_VZqV4 " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
<tr>
<td>
<center> 4 </center>
</td>
<td>
<center> PPG Estatística - UFRGS </center>
</td>
<td>
<center>
<a href=" https://youtu.be/8PYG89fD8jQ " target="_blank"> </a>
</center>
</td>
<td>
<center> </center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
/* 4. MAKE SURE TO REMOVE THE CLOSING </div> TAGS HERE THAT WERE FOR floatRight AND THE FIRST container div */Upvotes: 3
Iuri Guilherme
Reputation: 461
What you want to use is a bootstrap grid.
To get the four tables in four quadrants you may use the simplest grid:
<div class="container">
<div class="row">
<div class="col">
tabela 1
</div>
<div class="col">
tabela 2
</div>
</div>
<div class="row">
<div class="col">
tabela 3
</div>
<div class="col">
tabela 4
</div>
</div>
</div>
Upvotes: 0
Related Questions
- Stop table cells from overlapping HTML CSS
- Contents in <td> are overlapping
- How do I stop tables in <div>s conflicting with each other?
- CSS making tds overlap in a table
- HTML tables next to each other
- Two tables right beside each other
- HTML Table Columns are overlapping
- HTML CSS table lines overlaps
- How to prevent these tables from overlapping?
- html side by side tables