I have a table within a table and there are these phantom borders. For the life of me I have tried so many things to kill these extra spaces and I do not know how to get rid of them. Check out the jsfiddle
body{
background: #ddd;
}
.outterTbl{
border-collapse: collapse;
border-spacing: 0px;
background: green;
}
.outterTbl th{
background: black;
color: white;
}
.outterTbl td{
margin: 0px;
border-spacing: 0px;
border: none;
}
.innerTbl{
border-collapse: collapse;
border-spacing: 0px;
text-align: center;
}
.innerTbl th{
background: #3399cc;
color: white;
}
.innerTbl tr:nth-child(odd) {
background: white;
}
.innerTbl tr:nth-child(even){
background: #9ccde5;
}
adding
padding: 0px;
to the outertable td does the trick
jsfiddle
Related
Table {
font-family: Arial;
background-color: #EEEEEE.
border-collapse: collapse;
width: 100%;
}
Table td, Table th {
border: 1px solid #ddd;
padding: 1px 3px;
}
Table th {
font-size: 12px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #1C6EA4;
color: white;
}
Table tr td:nth-child(1) {
color: #ff0000;
}
But E-mail i receive never shows the color i input. i already checked that it worked when i input the code on Web-based HTML CSS try editor.
What is the problem of below CSS code?
I have a table inside an overflowing < div >. I am struggling to make bottom-border, either for the table or for the div, that will look nice. The current situation is: when overflowing, the bottom-border of the div looks nice. When not overflowing, it looks out of place. I have put the bottom-border on the table, when overflowing, it will obviously not show. I don't have any experience with JavaScript/Jquery/etc. and have tried to only use CSS for this so far.
#container {
width: 100%;
height: 0 auto;
overflow: auto;
}
#table_wrapper {
border-bottom: 1px solid #5C6F8C;
float: none;
overflow: auto;
height: 80vh;
width: 80%;
}
#test_table {
border-collapse: separate;
border-spacing: 0;
letter-spacing: 1px;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: calc(8px + 0.3vw);
text-align: center;
width: 100%;
/*border-bottom: 1px solid #5C6F8C;*/
}
#top_header {
border: 2px solid #5C6F8C;
border-right: 0px;
background-color: #ADBEDA;
}
caption {
background-color:white;
}
td, th {
border: 1px solid #5C6F8C;
border-right: 0px;
border-bottom: 0px;
padding: 5px 10px;
text-align: left;
}
tbody > tr:first-child > td {
border-top: 0px;
}
tbody > tr:first-child > th {
border-top: 0px;
}
th {
background-color: #ADBEDA;
}
tr:nth-child(even) {
background-color: #CFDDF5;
}
tr:nth-child(odd) {
background-color: #E3ECFD;
}
tr:hover {
background-color: #F0F5FF;
text-shadow:0px 0px 0.25px black;
}
<div id="container">
<div id="table_wrapper">
<table id="test_table">
<thead>
<th id="top_header">No.</th>
<th id="top_header">asdad.</th>
<th id="top_header">asdad</th>
</thead>
<tbody>
<tr><th>1</th><td>asdad</td><td>asdad</td></tr>
<tr><th>2</th><td>asdad</td><td>asdad</td></tr>
<tr><th>3</th><td>asdad</td><td>asdad</td></tr>
<tr><th>4</th><td>asdad</td><td>asdad</td></tr>
<tr><th>5</th><td>asdad</td><td>asdad</td></tr>
<tr><th>6</th><td>asdad</td><td>asdad</td></tr>
<tr><th>7</th><td>asdad</td><td>asdad</td></tr>
<tr><th>8</th><td>asdad</td><td>asdad</td></tr>
<tr><th>9</th><td>asdad</td><td>asdad</td></tr>
<tr><th>10</th><td>asdad</td><td>asdad</td></tr>
</tbody>
</table>
</div>
</div>
Better observable here, because the result screen can be resized:
https://jsfiddle.net/s43yuebt/2/
Can I achieve what I want by only using CSS?
use max-height on #table_wrapper
#table_wrapper {
border-bottom: 1px solid #5C6F8C;
float: none;
overflow: auto;
max-height: 80vh;
width: 80%;
}
#container {
width: 100%;
height: 0 auto;
overflow: auto;
}
#table_wrapper {
border-bottom: 1px solid #5C6F8C;
float: none;
overflow: auto;
max-height: 80vh;
width: 80%;
}
#test_table {
border-collapse: separate;
border-spacing: 0;
letter-spacing: 1px;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: calc(8px + 0.3vw);
text-align: center;
width: 100%;
/*border-bottom: 1px solid #5C6F8C;*/
}
#top_header {
border: 2px solid #5C6F8C;
border-right: 0px;
background-color: #ADBEDA;
}
caption {
background-color:white;
}
td, th {
border: 1px solid #5C6F8C;
border-right: 0px;
border-bottom: 0px;
padding: 5px 10px;
text-align: left;
}
tbody > tr:first-child > td {
border-top: 0px;
}
tbody > tr:first-child > th {
border-top: 0px;
}
th {
background-color: #ADBEDA;
}
tr:nth-child(even) {
background-color: #CFDDF5;
}
tr:nth-child(odd) {
background-color: #E3ECFD;
}
tr:hover {
background-color: #F0F5FF;
text-shadow:0px 0px 0.25px black;
}
<div id="container">
<div id="table_wrapper">
<table id="test_table">
<thead>
<th id="top_header">No.</th>
<th id="top_header">asdad.</th>
<th id="top_header">asdad</th>
</thead>
<tbody>
<tr><th>1</th><td>asdad</td><td>asdad</td></tr>
<tr><th>2</th><td>asdad</td><td>asdad</td></tr>
<tr><th>3</th><td>asdad</td><td>asdad</td></tr>
<tr><th>4</th><td>asdad</td><td>asdad</td></tr>
<tr><th>5</th><td>asdad</td><td>asdad</td></tr>
<tr><th>6</th><td>asdad</td><td>asdad</td></tr>
<tr><th>7</th><td>asdad</td><td>asdad</td></tr>
<tr><th>8</th><td>asdad</td><td>asdad</td></tr>
<tr><th>9</th><td>asdad</td><td>asdad</td></tr>
<tr><th>10</th><td>asdad</td><td>asdad</td></tr>
</tbody>
</table>
</div>
</div>
Scenario :
I have two tables that are next to each other.
Todo :
I would like to know how to move the right table down when the window
is resized. The table should be able to resize with the table also.
It would be great if someone could help me out with the css.
Click here for link to codepen
.leftContainer {
width:50%;
position:fixed;
top:45%;
//display:inline-flex;
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border:none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
td {
padding: 20px 10px 20px 10px;
}
}
}
.rightContainer {
max-width: 50vw;
position:fixed;
//float:right;
top:45%;
right:5%;
display:flex;
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border:none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
td {
padding: 10px;
}
}
}
Problem is that both the containers are having fixed position. So if both containers can be given relative position in your case, then with flex box we can achieve the following.
Approach :
Provide display flex to body (the container of both the divs)
Allow flex-wrap so that the other div can be adjusted accordingly by getting below the first div if enough space is not present.
Let me know in comments, if its not helpful. See in full page mode
html, body {
width: 100%;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-wrap: wrap;
}
.leftContainer {
border: 1px solid black;
width:50%;
position:relative;
}
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border:none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
td {
padding: 20px 10px 20px 10px;
}
}
}
.rightContainer {
border: 1px black solid;
max-width: 50vw;
position:leative;
flex:wrap;
//float:right;
top:45%;
right:5%;
display:flex;
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border:none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
td {
padding: 10px;
}
}
}
.unreadMsgDiv{
height:18px;
width:18px !important;
border-radius:10px;
background-color:#FFA200;
display:inline-block !important;
font-size:13px;
text-align:center;
vertical-align: top;
margin-left: 15px;
color: black;
border: 1px solid #FFA200;
}
.beforeRead {
background-color: #FFA200;
padding: 0px 5px 0px 5px;
white-space: nowrap;
}
.afterRead {
background-color: #BFBFBF;
padding: 0px 5px 0px 5px;
white-space: nowrap;
}
.status {
background-color:white;
border: 1.2px solid #AEAEAE;
width:100px !important;
height:100px !important;
text-align: center;
text-decoration:none;
}
.statusTop {
margin: 20px 0px 5px 0px;
font-size: 30px;
display: block;
}
.statusBottom {
font-size: 12px;
}
.status:hover {
background-color:#002559;
color: white;
cursor: pointer;
}
<div class="leftContainer">
<table>
<thead>
<th colspan="4" style="text-align:left">Overview</th>
</thead>
<tbody>
<tr>
<td><div class="status"><span class="statusTop">10</span><span class="statusBottom" >Total cases</span></div></td>
<td><div class="status"><span class="statusTop">5</span><span class="statusBottom"><router-link style="text-decoration:none; color:black;" :to="{ name: 'Applications', params: { appType: 'pending', test: 'testinggg' }}">PENDING</router-link></span></div></td>
<td><div class="status"><span class="statusTop">3</span><span class="statusBottom">SUCCESSFUL</span></div></td>
<td><div class="status"><span class="statusTop">2</span><span class="statusBottom">REJECTED</span></div></td>
</tr>
</tbody>
</table>
</div>
<div class="rightContainer">
<table>
<thead>
<th colspan="3" style="text-align:left">Updates<div class="unreadMsgDiv">unreadMsg</div></th>
</thead>
<tbody>
<tr>
<td style="font-style:italic; font-size:13px; padding-bottom: 15px;" colspan="3">10 new updates since last login on...</td>
</tr>
<tr>
<td><span>30 Sept</span></td>
<td style="white-space: nowrap;">Ref. 1234454</td>
<td>Supervisor has approved the details. Please do check.</td>
</tr>
</tbody>
</table>
</div>
.leftContainer, .rightContainer {
display: flex;
flex-flow: row wrap;
flex-basis: auto;
max-width: 50%;
align-content: baseline;
justify-content: flex-start;
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border: none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
}
}
.leftContainer {
td {
padding: 20px 10px 20px 10px;
}
}
.rightContainer {
td {
padding: 10px;
}
}
I am trying to make a table look nice with CSS.
I have given a border radius to the heading cells. However - a thin, radius-less, border is being applied on top of my curved border. Chrome says its getting this css from the user agent stylesheet. How can I fix this?
#IPTable {
color: #333; /* Lighten up font color */
font-family: Helvetica, Arial, sans-serif; /* Nicer font */
width: 100%;
border-collapse:separate;
border-spacing: 0;
}
#IPTable th {
background: #3E3E3E;
color: #FFF; font-weight: bold;
height: 40px;
}
#IPTable td {
background: #FAFAFA;
}
#IPTable td:first-child
#IPTable tr:nth-child(even) td { background: #F1F1F1; }
#IPTable tr:nth-child(odd) td { background: #FEFEFE; }
#IPTable tr td:hover { background: #666; color: #FFF; }
#IPTable tr:first-child th:first-child {
border-radius: 20px 0 0 0;
}
#IPTable tr:first-child th:last-child {
border-radius: 0 20px 0 0;
}
I have a table that gets loaded from a text file. The table is contained within a container div. I've styled the table, but when the table has too many columns for the width of the container div, the content overflows and is now scroll-able. This is not a problem, however, from the point where the overflow occurs, the styling for the table does not apply anymore.
Please have a look at the image:
The styling for this table is below:
table.static {
width: 100%;
margin-bottom: 0!important;
margin-top: 0!important;
}
table.static thead {
background: #D0D6DA;
border-bottom: 1px solid #aaa;
}
table.static thead tr th {
border-left: none;
border-right: none;
line-height: 30px;
padding: 0 10px;
text-align: left;
color: #333;
font-weight: 400;
text-shadow: 0 1px 0 #fff;
}
table.static tbody tr td {
line-height: 25px;
padding: 0 10px;
border: 0 solid #999;
}
table.static tbody tr td {
border-bottom: 1px solid #E1E5E7;
}
table.static tbody tr:last-child td {
border-bottom: 0;
}
table.static tbody tr.even td {
background-color: #EDF1F3;
border-bottom: 1px solid #D8DCDE;
}
table.static tbody tr td input,
table.static tbody tr td button {
margin: 10px 0;
}
Can anyone please explain why this is happening, and what I can do to fix it? Thank you
Try this
table.static {
min-width: 100%;
margin-bottom: 0!important;
margin-top: 0!important;
}