How can I change the thickness of a line between the two table rows
eg:
(the one highlighted).
This is how my code looks like at the moment:
i {
cursor: pointer;
}
a {
color: inherit;
}
th {
white-space: pre-wrap;
font-size: 25px;
color: goldenrod;
}
p {
font-family: 'BioRhyme', serif;
font-size: 35px;
}
<table class="table table-hover table-borderless">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>IP</th>
<th>Port</th>
<th>Ping</th>
<th>Players</th>
</tr>
</thead>
<tbody id="table">
<tr>
<th>Hexah's Test</th>
<th>0.0.0.0</th>
<th>27015</th>
<th>koala</th>
</tr>
<tr>
<th>Hexah's Test</th>
<th>0.0.0.0</th>
<th>27015</th>
<th>koala</th>
</tr>
</tbody>
</table>
I'm using Bootstrap Material Design v4
Thanks!
You can increase the border width between items in a table by using this in your CSS file:
td {
border-bottom: 5px solid black;
border-top: 5px solid black;
}
You can change the color, thickness, and the style of the border using those 3 values. You can, of course, add these properties to the th and table as well, changing the border style to other sides:
border
border-right
border-left
Learn more about CSS tables here.
Related
I am trying to create a table with the following two functionalities:
Some kind of 'bring-to-front with shadow' or '3d effect' that I see in some websites and find very pleasant.
Mouse cursor should have the 'hand' icon indicating the row is clickable.
I need these functionalities to appear whenever the user hover over the rows of the table. I tried using Bootstrap 4's table-hover class's functionality but couldn't achieve any of the two functionalities.
For the first functionality, I have an idea of adding a class with shadow to the <tr> being hovered. Don't know however, if this is the best approach. Is there some already defined class that could achieve such behavior?
And for the second functionality, I have no idea. Any suggestions?
Here's my code:
<div class="container">
<div class="table-wrapper">
<table class="table">
<thead id="thead_st" class="thead">
<tr>
<th class="thead-row" scope="col"></th>
<th class="thead-row" scope="col">1</th>
<th class="thead-row" scope="col">2</th>
<th class="thead-row" scope="col">3</th>
<th class="thead-row" scope="col">4</th>
<th class="thead-row" scope="col"></th>
</tr>
</thead>
<tbody>
<tr class="trow">
<th scope="row"></th>
<td class="score">4.7</td>
<td>Bla bla</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
.table-wrapper {
border-radius: 8px;
overflow: hidden;
}
.container {
margin-top: 50px;
margin-bottom: 50px;
background: white;
border-radius: 8px;
padding: 0px;
}
body {
background: #ECEEF1;
font-family: 'Roboto', sans-serif;
color: #2C3A56;
}
tr {
font-size: 16.5px;
line-height: 50px;
padding: 0px;
font-weight: 100;
}
td, th {
display: table-cell;
text-align: center;
}
#thead_st {
background-color: #F6CE52;
border: 3px solid #F6CE52;
color: white;
}
.thead-row {
line-height: 20px;
font-weight: 100;
}
.trow:hover {
cursor:pointer; //set the cursor to pointer (hand)
background-color: blue; //sets hovered row's background color to blue
box-shadow: 5px 10px #888888;
}
Please Check Below Fiddle. Your two requirement completed.
Some kind of 'bring-to-front with shadow' or '3d effect' that I see in some websites and find very pleasant.
Mouse cursor should have the 'hand' icon indicating the row is clickable.
Fiddle
.trow
{
transition: transform .2s;
}
.trow:hover {
cursor:pointer;
transform: scale(1.03);
background:#ccc;
color:#fff;
}
In css, assuming your <tr> has .row class :
.row:hover{
cursor:pointer; //set the cursor to pointer (hand)
background-color:blue; //sets hovered row's background color to blue
box-shadow: 5px 10px #888888; //this is a box shadowing effect that you can tweak at your choice.
}
If further more you just want to make that "3D" effect you can play with width and height properties of the <tr> element to make it bigger over the others on hover event.
When I used to play with 3D effects I usually implemented 2D Transforms to adjust positioning with translation properties.
I want to override the style of a TD with a background colour.
My problem is that I have (mechanically) generated table which puts a CLASS on all TR for Zebra Stripes.
So I have
<table>
<tbody>
<tr class="myTROdd">...
<tr class="myTREven">...
<td class="myBackRed">Highlight this cell</td>
My CSS knowledge is weak, but as I understand it
.myBackRed {background-color: #FF0000;}
is less specific, so does not work.
.myTREven TD.myBackRed {background-color: #FF0000;}
is specific and does work, but I want something more generic, for example I tried this (which doesn't work)
.TABLE TD.myBackRed {background-color: #FF0000;}
The problem I have with
.myTREven TD.myBackRed {background-color: #FF0000;}
is that the actual CMS Template is
<tr class="my{TAG}TROdd">...
where {TAG} is substituted with any one of a large number of optional "Adjustment" values, and I am trying to avoid having to code every possible combination in style sheet for my cell-override style
Example of the Fiddle, below with TD override style for rows 3-4, no explicit override CSS for rows 5-6
https://jsfiddle.net/dB93J/1240/
This question comes close, but doesn't solve my problem.
EDIT: As per #Roberrrt comment I've changed
.TABLE TD.myBackRed {background-color: #FF0000;}
to
TABLE TD.myBackRed {background-color: #FF0000;}
and that does indeed seem to override the cell regardless of the variation to the TR class. See new fiddle https://jsfiddle.net/dB93J/1247/
If the understanding about your issue is correct. This is the possible answer for your problem. At first I select the class name of this TR tag with a class="myBackYellowTREeven" and TD tag with a class="myBackYellowTROdd". Below, is my solution...
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
/* NOTE myTROdd is not defined */
.myTREven,.myTREven TD
{
background-color:#f1f1f1
}
.myBackYellowTROdd
,.myBackYellowTROdd TD
{
background-color: #fffccc;
}
.myBackYellowTREven
,.myBackYellowTREven TD
{
background-color: #fff799;
}
/* .myBackRed */ /* This is what I would like to define! ... */
/* , .myBackRed TD */ /* ... or this even ... */
/* , .TABLE TD.myBackRed */ /* ... or EVEN THIS */
.myTREven TD.myBackRed
, .myTROdd TD.myBackRed /* In case myTROdd defined in future */
/* , .myBackYellowTROdd TD.myBackRed */ /* Do I really need this for EVER possible TR style? */
/* , .myBackYellowTREven TD.myBackRed */ /* DITTO */
{
background-color: #FF0000
}
/* MY SOLUTION */
tr.myBackYellowTREven td.myBackRed,
tr.myBackYellowTROdd td.myBackRed {
background-color: #FF0000}
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr class="myTROdd">
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>Normal ODD Row</td>
</tr>
<tr class="myTREven">
<td>Fred Bloggs</td>
<td>PF</td>
<td>5'7"</td>
<td>01-08-1988</td>
<td>Normal EVEN Row</td>
</tr>
<tr class="myTROdd">
<td>DeMarcus Cousins</td>
<td>C</td>
<td class="myBackRed">6'11"</td>
<td>08-13-1990</td>
<td>ODD Row with Red cell</td>
</tr>
<tr class="myTREven">
<td>Isaiah Thomas</td>
<td>PG</td>
<td class="myBackRed">5'9"</td>
<td>02-07-1989</td>
<td>EVEN Row with Red cell</td>
</tr>
<tr class="myBackYellowTROdd">
<td>Ben McLemore</td>
<td>SG</td>
<td class="myBackRed">6'5"</td>
<td>02-11-1993</td>
<td>Yellow ODD Row
- Red cell missing</td>
</tr>
<tr class="myBackYellowTREven">
<td>Marcus Thornton</td>
<td>SG</td>
<td class="myBackRed">6'4"</td>
<td>05-05-1987</td>
<td>Yellow EVEN Row
- Red cell missing</td>
</tr>
</tbody>
</table>
I have different tables in my page which should have different border, cellpadding etc. I can create many classes like,
.pad5 td {padding:5px}
and then using,
<table class="pad5">
But if I use 'table' is css, the style is applied to all tables. How can I achieve the result?
You can try to add an ID to each table and in css make reference with this ID like:
CSS & HTML:
#table1 tr td {
padding: 5px;
border: 4px solid #888;
}
#table2 tr td {
padding: 5px;
border: 4px solid red;
}
<table id="table1">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
<table id="table2">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
declare classes for each type of styling you want to create, and assign to the <table> in the html via the class attribute
css
.table1 {
...
}
.table2 {
...
}
html
<table class="table1">
...
</table>
<table class="table2">
...
</table>
You can give your tables class names also
Example HTML:
<table class="mytable">
<tr>
<td>My cell</td>
</tr>
</table>
<table class="anothertable">
<tr>
<td>My cell</td>
</tr>
</table>
Example CSS:
.mytable {
border: 1px solid black;
}
.anothertable {
border: 1px solid red;
}
The first table will have a 1px solid black border and the second table will have a 1px solid red border.
I found that if I don't use table at all in CSS it works.
e.g.- .cell {border-spacing:10px}
give each of them seperate ids. classes are for css which will be applied to a bunch of different objects, ids are for css which will be applied to specific objects
<table id="first_table"></table>
I have a DOM structure like the following:
<table class="playlist">
<thead>
<tr>
<th>TH1</th>
<th width="53">TH2</th>
<th width="53">TH3</th>
<th width="53">TH4</th>
<th width="53">TH5</th>
<th width="53">TH6</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
<td>TD6</td>
</tr>
<tr class="expansion">
<td class="expansion" colspan="6">
<div class="comment_wrapper">
<form>
<textarea style="width=482px" class="mini">x</textarea>
</form>
</div>
</td>
</tr>
</tbody>
</table>
Related style rules are like:
table {
width: 580px;
border-bottom: 1px solid #EEE;
}
.comment_wrapper {
height: 270px;
border: 1px red solid;
overflow-x: hidden;
overflow-y: auto;
}
.comment_wrapper form textarea {
height: 70px;
width: 482px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px red solid;
}
My problem is that whenever I added the second tr, width of table columns changed into a mess like the following in IE6/7.
When I comment out this tr, the column width restore.
Why does adding a tr affects column width? How can I avoid this effect?
PS
I've reproduced this problem on JSFiddle, and this is the link: http://jsfiddle.net/7mYY8/1/
Well, you have 6 columns 5 of which have a defined width.
The 1st column doesn't. This means it has to be computed. Sure you have the table width defined in CSS, but IE 6 isn't exactly the best thing.
Your best bet is going to be to explicitly define the width of all of your header columns. Then give the table the css attribute of "table-layout: fixed". This is going to enforce your widths for the entire rendering of the table.
Is it not possible to style a <table> and its <tr> <td> using css classes?
For example:
<table class="calendar_table">
<tr>
<td>
<h2>Datum</h2>
</td>
<td>
<h2>Event</h2>
</td>
<td>
<h2>Type</h2>
</td>
</tr>
</table>
Then using something like this CSS:
.calendar_table {
width:880px;
}
.calendar_table tr {
margin:0;
padding:4px;
}
It is possible, it should work properly!
Here is an example
Have fun, you can do whatever you want! I don't recommend using <table>though, unless it is used to present structured data that is meant to be in a table. If it is to draw a layout, use <div> and CSS!
As Aleks wrote, I would define css for the table itself too. But no nested brackets in css definition like: table.custom_class { ... td, th { ... } }.
<table class="custom_class">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Giovanni</td>
<td>Rovelli</td>
</tr>
<tr>
<td>Roland</td>
<td>Mendel</td>
</tr>
</table>
The following CSS example can be used:
table.custom_class {
border:solid 5px #006CFF;
margin:0px;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
line-height:22px;
font-size:13px;
font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
font-weight:400;
text-decoration:none;
color:#0018ff;
white-space:pre-wrap;
}
table.custom_class th {
padding: 20px;
background-color:#98dcff;
border:solid 2px #006CFF;
}
table.custom_class td {
padding: 20px;
border:solid 1px #006CFF;
}
table.custom_class tr {
margin:0;
padding:4px;
}
You can see it in action https://jsfiddle.net/16L9h2ft/
Yes, it's possible. What you have is working to some extent (with tweaks).
To style the td, use:
.calendar_table td {
}
Or:
.calendar_table tr td {
}
will also work.
For setting attributes such as borders, colors, and sizes this is the cleaner way to do it, over embedding that information in HTML.
This approach is great with data tables where the information naturally should be presented in a table. If you are laying out data use more semantically correct tags such as <div> and <span>.
The answers above are either old, or not answered properly, as they are ignoring the styling of the table itself and not just td or th etc. elements.
If we would have a table like this:
<table class="custom_class">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row value 1</td>
<td>row value 2</td>
</tr>
</tbody>
</table>
Then in .css we should put:
table.custom_class {
border: 1px solid black;
td, th {
color: blue;
}
}
Table rows don't take padding, TDs do.
Change your style to:
.calendar_table td {
margin:0;
padding:4px;
}
Tables expand if necessary to let content fit
As far as I know, table rows do not have margin or padding
These layout rules apply no matter how you set it.
Nice looking green table theme :
https://jsfiddle.net/sujayun/qwsLk3aL/
table.namTblCls
{
color:purple;
border: #004400 4px solid;
border-collapse: collapse;
font-size:16px;
}
table.namTblCls th
{
text-align: center;
color:yellow;
background-color:#008800;
border: #004400 2px solid;
padding: 20px;
}
table.namTblCls td
{
text-align: center;
padding: 20px;
border: #004400 1px solid ;
border-right-width: 2px;
border-left-width: 2px;
}
table.namTblCls tr:nth-child(odd)
{
background-color: #DDFFDD;
}
table.namTblCls tr:nth-child(even)
{
background-color: #BBFFBB;
}