That's my CSS for styling up the HTML table. I guess something is messing the hover state.
.tg {
border-collapse:collapse;
border-spacing:0;
border-color:#ccc;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
width: 150px;
height: 10px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
border-color: #ccc;
color: #333;
background-color: #fff;
}
tr:hover {
background-color:red !important;
}
Since I don't get the desired effect of having a red background while hovering the line. Here's the HTML:
<table class="tg">
<tr class='tr-031e'>
<th class="tg-031e"><b>№</b></th>
<th class="tg-031e"><b>Name</b></th>
<th class="tg-031e"><b>Age</b></th>
</tr>
<tr class='tr-031e'>
<td class="tg-031e"><input type='checkbox' name='person'></td>
<td class="tg-031e">Guy</td>
<td class="tg-031e">18</td>
</tr>
</table>
What about this,
tr:hover td { background-color:red; }
<td>s exist on a layer on top of the <tr>, as a result, your background-color: white is covering up the red.
.tg {
border-collapse:collapse;
border-spacing:0;
border-color:#ccc;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
width: 150px;
height: 10px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
border-color: #ccc;
color: #333;
}
tr {
background-color: #fff;
}
tr:hover {
background-color:red !important;
}
Try this:
tr:hover, td:hover {
background-color:red;
}
EDIT
In .tg td, remove:
background-color: #fff;
JSFiddle Demo
Related
My table with rowgroups.
How can I show only the inner borders for the rowgroup?
At the moment the table shows no left/right/top border as wanted, but I don't know how I can select the last row of the rowgroup.
Borders that aren't needed:
div {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: normal;
}
table {
table-layout: fixed;
}
table.dataTable,
table.dataTable th,
table.dataTable td {
box-sizing: border-box ! important;
}
.tg {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
border: none ! important;
border-collapse: collapse;
border-color: #ccc;
border-spacing: 0;
}
.tg td,
th {
border-color: #ccc;
border-style: solid;
border-width: 1px ! important;
color: #333;
padding: 10px 5px;
word-break: normal;
}
.tg tr td:first-child,
th:first-child {
border-left: none ! important;
}
.tg tr td:last-child,
th:last-child {
border-right: none ! important;
}
.tg tr td,
th {
border-right: none ! important;
border-top: none ! important;
}
.tg tr th {
border-bottom: none ! important;
}
.tg thead tr:last-child th {
border-bottom: 1px solid ! important;
}
.tg .header-left {
background-color: #c0c0c0;
border-color: inherit;
font-size: large;
font-weight: bold;
text-align: left;
top: 0;
vertical-align: top;
will-change: transform;
}
.tg .header-center {
background-color: #c0c0c0;
border-color: inherit;
font-size: large;
font-weight: bold;
text-align: center;
top: 0;
vertical-align: top;
will-change: transform;
}
.tg .header-right {
background-color: #c0c0c0;
border-color: inherit;
font-size: large;
font-weight: bold;
text-align: right;
top: 0;
vertical-align: top;
will-change: transform;
}
.tg .cell-left {
border-color: inherit;
text-align: left;
vertical-align: middle;
}
.tg .cell-center {
border-color: inherit;
text-align: center;
vertical-align: middle;
}
.tg .cell-right {
border-color: inherit;
text-align: right;
vertical-align: middle;
}
<div class="container">
<table class="tg wrap stripe" id="tableData">
<thead>
<tr>
<th class="header-left">Name</th>
<th class="header-left">Position</th>
<th class="header-center">Age</th>
<th class="header-center">Start date</th>
<th class="header-right">Salary</th>
<th class="header-">Office</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell-left">Airi Satou</td>
<td class="cell-left">Accountant</td>
<td class="cell-center">33</td>
<td class="cell-center">28-Nov-2008</td>
<td class="cell-right">$162,700</td>
<td>Tokyo</td>
</tr>
<tr>
<td class="cell-left">Angelica Ramos</td>
<td class="cell-left">Chief Executive Officer (CEO)</td>
<td class="cell-center">47</td>
<td class="cell-center">09-Oct-2009</td>
<td class="cell-right">$1,200,000</td>
<td>London</td>
</tr>
</tbody>
</table>
</div>
The following selector is what I would use:
.table tr:last-child th,
.table tr:last-child td{
border-bottom: none;
}
This is much easier to get the first row after row group:
table tr.dtrg-group + tr td {
border-top: none ! important;
}
The following CSS rule should remove your unwanted border:
tr:last-child td {
border-bottom: none;
}
Below is a refactored version of your CSS. Less is ALWAYS more, don't set properties to their default values, i.e. font-weight: normal is useless because font weight is already normal, just remove it, unclutter your CSS. Don't border-color: inherit if you're not drawing a border etc.
.container {
font-family: Lato, sans-serif;
font-size: 0.875rem;
}
.tg {
all: unset;
table-layout: fixed;
border-collapse: collapse;
border-color: #ccc;
border-spacing: 0;
}
td,
th {
border-left: 1px solid #ccc;
color: #333;
padding: 0.5em 0.2em;
}
td {
border-bottom: 1px solid #ccc;
}
th {
background-color: #c0c0c0;
font-size: large;
font-weight: bold;
}
.header-left,
.cell-left {
text-align: left;
}
.header-center,
.cell-center {
text-align: center;
}
.header-right,
.cell-right {
text-align: right;
}
td:first-child,
th:first-child {
border-left: none;
}
tr:last-child td {
border-bottom: none;
}
<div class="container">
<table class="tg wrap stripe" id="tableData">
<thead>
<tr>
<th class="header-left">Name</th>
<th class="header-left">Position</th>
<th class="header-center">Age</th>
<th class="header-center">Start date</th>
<th class="header-right">Salary</th>
<th class="header-">Office</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell-left">Airi Satou</td>
<td class="cell-left">Accountant</td>
<td class="cell-center">33</td>
<td class="cell-center">28-Nov-2008</td>
<td class="cell-right">$162,700</td>
<td>Tokyo</td>
</tr>
<tr>
<td class="cell-left">Angelica Ramos</td>
<td class="cell-left">Chief Executive Officer (CEO)</td>
<td class="cell-center">47</td>
<td class="cell-center">09-Oct-2009</td>
<td class="cell-right">$1,200,000</td>
<td>London</td>
</tr>
</tbody>
</table>
</div>
I'm trying to style a table using only SASS/CSS. I've set the width of my table to be 100%. However, when I set the font-size of the th element to 0.8em, My table fails to take all of the width it's allowed (Notice that the columns do not reach the border line on the right). How can I fix this using CSS, given that I don't control the HTML?
SASS/CSS
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: collapse;
border-spacing: 0;
display: block;
overflow: auto;
width: 100%;
thead {
th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
th:first-child {
border-top-left-radius: 5px;
}
th:last-child {
border-top-right-radius: 5px;
}
}
tbody {
td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
tr:nth-child(2n) {
background-color: lightgray;
}
}
}
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
Here is what I think you want, I just removed border-collapse, display:block (this make the table default CSS), here is a codepen with SCSS and a working snippet is here too:
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: separte;
border-spacing: 0;
display: table;
overflow: auto;
width: 100%;
}
table thead th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
table thead th:first-child {
border-top-left-radius: 5px;
}
table thead th:last-child {
border-top-right-radius: 5px;
}
table tbody td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
table tbody tr:nth-child(2n) {
background-color: lightgray;
}
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
remove display:block from table
#container,tr{
width:100%;
}
html,body{
width:100%;
}
#container{
border-radius:15px;
background-color:black;
}
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: collapse;
border-spacing: 0;
overflow: auto;
width: 98%;
margin:0 auto;
}
th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
th:first-child {
border-top-left-radius: 5px;
}
th:last-child {
border-top-right-radius: 5px;
}
td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
tr:nth-child(2n) {
background-color: lightgray;
}
<html>
<body>
<div id='container'>
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
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;
}
}
This question already has answers here:
The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?
(27 answers)
Closed 7 years ago.
table {
width:100%;
}
table, td, tr {
border: 1px #000000 solid;
border-collapse: collapse;
border-radius: 10px;
}
tr {
height:50px;
}
.price {
width: 65%;
text-align: center;
background-color: #000000;
color: #ffffff;
font-size: 1.5em;
border-color: #c0c0c0;
border-radius: 10px;
}
.buy {
width:35%;
text-align: center;
background-color: red;
color: #ffffff;
border-color: #c0c0c0;
}
<table>
<tr>
<td class="price">$180</td>
<td class="buy">Buy</td>
</tr>
<tr>
<td class="price">$180</td>
<td class="buy">Buy</td>
</tr>
<tr>
<td class="price">$180</td>
<td class="buy">Buy</td>
</tr>
</table>
I try to set border-radius to my "td" but not working.
What I want it looks like is border of td of both right and left side is radius.
Is any way can do that?
Here is a jsfiddle for you:
table {
width:100%;
background: #000;
border: #000 1px solid;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
td, tr {
border: 1px #000000 solid;
border-collapse: collapse;
border-radius: 10px;
}