How can I write the following html table attributes into an equivalent css?
<table bgcolor="#ffffff" align="center" border="0" style="width:600px;border: 1px solid #cccccc"></table>
Thanks.
So simple. Look at the following.
<table class="test">
.test
{
background-color:#fff;
text-align:center;
margin:0px auto;
width:600px;
border:1px solid #ccc;
}
table {
background-color: #fff;
text-align: center;
border: 1px solid #ccc;
width:600px;
}
This should do it.
The following code is a equivalent to your code:
table {
background-color:#fff;
border:1px solid #ccc;
margin:0 auto;
width:600px;
}
<table>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</table>
To see the (non existing) difference, here your example with a row:
<table bgcolor="#ffffff" align="center" border="0" style="width:600px;border: 1px solid #cccccc">
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</table>
Related
I can't seem to get media queries to work - at least for the one relevant style which needs to work - padding for the table-wrapper class. The padding set inline always wins.
I believe I need to have !important set for the media query so I do have that.
Media queries are at the top of the html
This is at the top of the html - <meta name="viewport" content="width=device-width">
The rest of the styles are inline / done by an app.
Anyone know what I might be missing?
https://codepen.io/lg00/pen/LvrXVY
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title></title>
<style>
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.header-title h1 {
font-size: 25px !important;
}
}
</style>
<div class="email-wrapper" style="background-color:#F5F6F7">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<!-- PADDING SET HERE -->
<table cellpadding="0" cellspacing="0" class="table-wrapper" style="margin:auto; margin-top:50px; background-color:#fff; padding:64px 100px">
<tbody>
<tr>
<td class="container header" style="background-repeat:no-repeat; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; color:#000; padding-bottom:32px; display:block !important; margin:0 auto !important; clear:both !important">
<div class="header-title" style="font-weight:bold">Test</div>
</td>
</tr>
<tr>
<td class="content" style="border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin:0 auto !important; clear:both !important">
<div class="header-title" style="color:#000; text-align:center">
<h1 style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom:15px; color:#47505E; margin:0px 0 10px; line-height:1.2; font-weight:200; line-height:45px; font-weight:bold; margin-bottom:30px; font-size:28px; line-height:40px; margin-bottom:32px; font-weight:400; color:#000; padding-top:0px">Test The Length of the Title - Will it Wrap</h1>
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="text-center" style="text-align:center">
Test
</td>
</tr>
</tbody>
</table>
<table class="data-table bordered" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px; border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<tbody>
<tr>
<td class="data-table-title" style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; font-weight:bold; font-size:20px; padding-top:0px">Test</td>
</tr>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
</tr>
<tr class="bordered" style="border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">test</td>
</tr>
</tbody>
</table>
<table class="data-table" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px">
<tbody>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test</span><br>
test<br>
</p>
</td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; width: 20%"></td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test2</span><br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="width:100%; text-align:center; clear:both !important">
<p class="text-center" style="text-align:center; font-size:12px; color:#666">Test</p>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
It is a specificity issue in your media queries. Move .header-title above .table-wrapper since the padding is overriding what is being set in .table-wrapper
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
Change your css to this, I hope it will work.
<style>
//Default styling
.table-wrapper {
width: 50%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
.header {
border-radius: 0px;
}
.header-title {
padding-left: 20px;
padding-right: 20px;
}
.header-title h1 {
font-size: 25px;
}
}
</style>
Please check the CSS specificity, as you said the in-line style is the most specific selector and "wins".
CSS specificity:
Inline Style
ID, Class
Pseudo-class, atributes
Elements, pseudo-element
I am new to html and css so i am not that good. The problem i have right now is that i have created a nested table with two tables. I got four columns with the blue color. But the problem is that i dont know how to get yellow lines like the flag has. The code i come so far is below.
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;}
table.yellow {background-color: #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
<table class="blue" border="1" width="100%">
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
(Image of Swedish Flag)
Not table but just div https://jsfiddle.net/2Lzo9vfc/134/
CSS
.flag {
background-color: #006AA7;
width: 500px;
height: 300px;
position: relative;
}
.flag::before {
background-color: #FECC00;
content: "";
height: 15%;
left: 0;
margin-top: -5%;
position: absolute;
top: 50%;
width: 100%;
}
.flag::after {
background-color: #FECC00;
content: "";
height: 100%;
left: 30%;
margin-left: -5%;
position: absolute;
top: 0;
width: 9%;
}
HTML
<div class="flag"></div>
It seems overly complicated to use tables for this. You can very simply achieve the desired result with absolute positioning. Notice how much less code this is:
.flag {
background: #0000ff;
position: relative;
width: 400px;
height: 300px;
}
.vertical {
background: #ffff00;
position: absolute;
left: 30%;
width: 60px;
height: 300px;
}
.horizontal {
background: #ffff00;
position: absolute;
top: 50%;
width: 400px;
height: 60px;
margin-top: -30px;
}
<div class="flag">
<div class="vertical"></div>
<div class="horizontal"></div>
</div>
Just for kicks..just one table.
table {
margin: 1em auto;
border-collapse:collapse;
}
td {
background: blue;
padding: 20px;
}
tr:nth-child(4) td,
td:nth-child(3) {
background: yellow;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Use CSS borders and border-collapse:collapse. Adjust the border width as necessary.
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;border-collapse:collapse}
table.yellow {background-color: #ffff00;border-collapse:collapse}
.top-left {border-bottom: 12px solid #ffff00;border-right: 12px solid #ffff00;}
.top-right {border-bottom: 12px solid #ffff00;border-left: 12px solid #ffff00;}
.bottom-left {border-top: 12px solid #ffff00;border-right: 12px solid #ffff00;}
.bottom-right {border-top: 12px solid #ffff00;border-left: 12px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
<table class="blue" border="1" width="100%">
<tr>
<td height="40" class="top-left">blue</td>
<td class="top-right">blue</td>
</tr>
<tr>
<td height="40" class="bottom-left">blue</td>
<td class="bottom-right">blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
You can set the border for every side seperatly per cell:
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: blue;border-collapse: collapse;}
.sweden_cell1 { border-right: 5px solid #ffff00;border-bottom: 5px solid #ffff00;}
.sweden_cell2 { border-left: 5px solid #ffff00;border-bottom: 5px solid #ffff00;}
.sweden_cell3 { border-right: 5px solid #ffff00;border-top: 5px solid #ffff00;}
.sweden_cell4 { border-left: 5px solid #ffff00;border-top: 5px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
<table class="blue" border="1" width="100%">
<tr>
<td class="sweden_cell1" height="40">blue</td>
<td class="sweden_cell2">blue</td>
</tr>
<tr>
<td class="sweden_cell3" height="40">blue</td>
<td class="sweden_cell4">blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Also as you can see you need the border-collapse: collapse; property to make the borders have no space between them
Futhermore if you wish to make the yellow part wider, just increase the pixel with of the border in the css (which is as 5px atm)
I think you can't make that space between columns and rows. You could make table with 3 rows and columns, paint cells in yellow and blue. But here you can find more interesting idea of swedish flag with just one div. http://talgautb.github.io/vexillum/demo/
You need to use border-collapse and add the borders to the cells of the table.
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {
background-color: #0000ff;
border-collapse: collapse;
width:320px;
}
.border-right { border-right: 30px solid #ffff00;}
.border-bottom { border-bottom: 30px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table>
<tr>
<td>
<table class="blue" border="1">
<tr class="border-bottom">
<td height="60" width="30%" class="border-right"></td>
<td width="70%"></td>
</tr>
<tr>
<td height="60" width="30%" class="border-right"></td>
<td width="70%"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
With the following adjustments to your CSS it kind-of looks like the swedish flag.
I used various different CSS selectors to make this happen, altho I doubt that it'll be easy to understand I'll try to explain
I removed a table from your HTML, it was redundant as the swedish flag yellow areas can be created through the borders just one table.
What I did was gave every td element in your table a border: 10px solid #ffff00 which creates borders around every td element.
then after that I used some more complex selectors to target specific td elements and remove borders where they weren't required.
So the first tr element in the table can be selected with :first-child (just like any other first child to a parent can be selected like this). but then we also want the first td from that which makes for the total selector:
table.blue tr:first-child td:first-child { ... }
as you can see below the CSS resets the border-top and border-left properties as this is the top-left td so the top and left part don't need the yellow border.
I simply followed the same principle with the rest of the selectors, targetting specific td elements and resetting the borders they did not need.
After that I also added some properties to reset the spacing between the borders to 0 with cellspacing="0" cellpadding="0" - these two properties aren't consistently available in CSS so they have to be put in the HTML.
I also removed the redundant border property on the table because we can set the border through CSS which allows us to be more flexible as we don't have to do styling through editing HTML.
for further reading on first-child and last-child CSS selectors:
:first-child
:nth-child(n)
Hope this helps you abit.
Good luck!
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;}
table.blue td {border: 10px solid #ffff00;}
table.blue tr:first-child td:first-child { border-top: none; border-left: none; }
table.blue tr:first-child td:nth-child(2) { border-top: none; border-right: none; }
table.blue tr:nth-child(2) td:first-child { border-bottom: none; border-left: none; }
table.blue tr:nth-child(2) td:nth-child(2) { border-bottom: none; border-right: none; }
</style>
<title>HTML Table</title>
</head>
<body>
<table class="blue" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
</table>
</body>
</html>
</body>
</html>
Here's a way to do it by creating it without tables, and instead layering 2 objects on each other.
What I like about doing it this way like other answers here show as opposed to tables is it shows you a bunch of different powers of css. z-index is a layering style option (-1 for #rectangle places it behind the div). You can play around with the width, height, top, and left values for each to see how they change the placement of the shapes.
#plus-sign {
background:yellow;
width:20px;
height:100px;
position:relative;
margin-left:33px;
}
#plus-sign:before {
background:yellow;
content:"";
width:200px;
height:20px;
position:absolute;
top:40px;
left:-33px;
}
#rectangle {
width:200px;
height:100px;
background-color:blue;
position: absolute;
z-index: -1;
left:-33px;
}
<div id="plus-sign"><span id="rectangle"></span></div>
Nice n' easy Lemon squeezie.
Adjust the border widths evenly for a skinnier or fatter yellow line.
You can also change the colors as your see fit using hexadecimal coloring to more closely match the true Swedish flag colors by replacing "yellow" with a hashtag and then whatever color # in hexadecimal for the true colors. The same can be done with the blue. Hope it helps! ;)
#swedeFlag{
width: 320px;
height: 200px;
border:1px solid black;
}
#swedeFlag .left{
background-color: blue;
height: 40px;
border-bottom: solid yellow 10px;
border-right: solid yellow 10px;
}
#swedeFlag .right{
background-color: blue;
height: 40px;
border-bottom: solid yellow 10px;
border-left: solid yellow 10px;
width: 200px;
}
#swedeFlag .bLeft{
background-color: blue;
height: 40px;
border-top: solid yellow 10px;
border-right: solid yellow 10px;
}
#swedeFlag .bRight{
background-color: blue;
height: 40px;
border-top: solid yellow 10px;
border-left: solid yellow 10px;
width: 200px;
}
<table id="swedeFlag" border="2" width="320px" cellspacing="0">
<tr>
<td class="left">blue</td>
<td class="right">blue</td>
</tr>
<tr>
<td class="bLeft">blue</td>
<td class="bRight">blue</td>
</tr>
</table>
<!--http://www.w3schools.com/css/css_border.asp -->
I have a percentage width on a table and an overflow-y:auto. When scroll appears, the width of the table is shirked.
How can i make the table have the same width (with or without the scroll)
Thank you!
Here is my css:
html,body{height:99%;}
.table1
{ margin: 0;
padding: 0;
border-collapse: collapse;
width:98.1%;
height:5%;
text-align: box-sizing: border-box;
left;table-layout: fixed;
}
.table1 td
{ border-collapse: collapse;
background-color: #EAEAEA;
border: 1px solid lightgrey;
padding-left: 3px;
}
#container
{ overflow-y:auto;
height:20%;
width:100%;left:0;
right:0;
}
.table2
{ margin: 0;
padding: 0;
border-collapse: collapse;
left:0;
right:0;
min-width:98.1%;
box-sizing: border-box;
table-layout: fixed;
}
.table2 tr
{ height:30px;
}
.table2 td
{ margin: 0;
border-collapse: collapse;
border: 1px solid lightgrey;
border-top:none;
border-right: 1px solid lightgrey;
}
And here is my HTML:
<html>
<head>
</head>
<body BGCOLOR="#EAEAEA" TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 >
<table class ="table1">
<colgroup>
<col width="20%"/>
<col width="50%"/>
<col width="30%"/>
</colgroup>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
<div id="container">
<table class="table2" BGCOLOR="WHITE">
<colgroup>
<col width="20%"/>
<col width="50%"/>
<col width="30%"/>
</colgroup>
<tbody>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Try this :
html,body{height:99%;}
.table1
{ margin: 0;
padding: 0;
border-collapse: collapse;
width:calc(100% - 17px);
height:5%;
text-align:left;
}
.table1 td
{ border-collapse: collapse;
background-color: #EAEAEA;
border: 1px solid lightgrey;
padding-left: 3px;
}
#container
{ overflow-y:scroll;
height:20%;
width:100%;left:0;
right:0;
}
.table2
{ margin: 0;
padding: 0;
border-collapse: collapse;
left:0;
right:0;
width:100%;
box-sizing: border-box;
table-layout: fixed;
}
.table2 tr
{ height:30px;
}
.table2 td
{
border: 1px solid lightgrey;
border-top:none;
border-right: 1px solid lightgrey;
}
You can see changes in container where I used width:calc(100% - 17px);. Width of container is decreased for 17px (width of scroller) but I, also, change this overflow-y:scroll;. Now all lines will be, well, in line :)
You don't need border-collapse in .table1 td and .table2 td... and overflow too.
Point is in that width:calc(100% - XYpx), in this case 17px (width of scrollbar)
I hope this is what You need.
There is Fiddle example
Update:
I create two js functions. First one check is there scrollbar in container element and adapt width of him. Second function is just for test, simulating if, in this case, height is changed.
In reality, when You add more rows, which count is more then container height, Your table will adapt. Or on resize browser, too.
In Your case You don't need that second js function called chVl(), it's in fiddle just for test, like I said before.
Try this Fiddle now
remove overflow-y:auto; in #container
like so:
#container
{
height:20%;
width:100%;
left:0;
right:0;
}
Are there any limitations in using the :not() operator?
I have this HTML:
<table>
<thead>
<th>AAAAAAA</th>
<th>VVVVVVVVVVV</th>
</thead>
<tr>
<td>111111</td>
<td>22222</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<table class="t">
<thead>
<th>AAAAAAA</th>
<th>VVVVVVVVVVV</th>
</thead>
<tr>
<td>111111</td>
<td>22222</td>
</tr>
</table>
And this CSS:
table td:not(.t) {
border: 1px solid black;
padding-left: 5px;
}
table th:not(.t) {
border: 1px solid black;
padding-left: 5px;
}
Yet both tables get the CSS rules.
Jsfiddle
It's because .t is applied to a table not a td
Try this:
table:not(.t) td
{
...
}
table:not(.t) td, table:not(.t) th
{
border: 1px solid black;
padding-left: 5px;
}
Just noticed, you can group your declarations too since they're the same.
You're having that class for a table, not any other element. So instead of applying it to the td apply it to table it would work.
I have designed this signup form. The problem is that there is too much space between the two rows i.e. the id and password parts.How do I reduce the space?
CSS (inside HTML / Head / Style elements)
<html>
<head>
<title>Signup</title>
<style>
div
{
position:absolute;
top:300px;
left:550px;
width:200px;
}
table
{
height:150px;
border:1px solid black;
border-radius:10px;
box-shadow:0px 0px 2px #777;
}
td
{
padding:10px;
}
.ip
{
border-radius:5px;
border:1px solid grey;
}
.label
{
color:#EE6AA7;
font-family:Helvetica;
font-size:17px;
}
</style>
</head>
HTML(Inside HTML/Body)
<body>
<div>
<form>
<table>
<tr>
<td class="label">Id</td>
<td><input type="text" name="id" class="ip"></td>
</tr>
<tr>
<td class="label">Password</td>
<td><input type="text" name="pswrd" class="ip"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
That's because you have table height 150px and rows became 75px height each (150/2).
To solve this problem, just remove height from the table and set height for td elements.
For example:
table{
padding: 10px;
/*height:150px;*/
border:1px solid black;
border-radius:10px;
box-shadow:0px 0px 2px #777;
}
td{
height:20px;
/*padding:10px;*/
}
Use style="border-collapse: collapse" on the table.