I need alternative way to make 2 elements (1 align left and 1 align right) in one line. I use display: flex; and display correctly on safari on iOS 9 but it won't display correctly on Safari on iOS 6.
It should look like this (iOS 9)
http://i.stack.imgur.com/SO3RM.jpg
And here is iOS 6
http://i.stack.imgur.com/jHK5l.jpg
My CSS code
.signedlatest {
font-family: "sfns_displayregular";
font-size: 13pt;
font-color: #ffffff;
background: #ffffff;
display: flex;
justify-content: space-between;
margin: 0;
border-top-style: solid;
border-bottom-style: solid;
border-color: gray;
border-width: 0.5px;
line-height: 250%;
padding-left: 0.3cm;
padding-right: 0.3cm;
}
HTML
<div class="signedlatest>
<a>iPhone 6S Plus</a>
<a>iOS 9.3.4</a>
.........
<a>iPhone 4S</a>
<a>iOS 9.3.4</a>
</div>
Try using <table>
table tr td:first-child{
padding-right:20px;
}
table tr{
border-bottom:1px solid black;
}
<table>
<tr>
<td>iPhone 6S Plus</td>
<td>iOS 9.3.4</td>
</tr>
<tr>
<td>iPhone 6S</td>
<td>iOS 9.3.4</td>
</tr>
<tr>
<td>iPhone 5</td>
<td>iOS 9.3.4</td>
</tr>
</table>
You could do something like:
a {
float: left;
width: 50%;
border-bottom: 1px solid #ddd;
}
a:nth-child(2n) {
text-align: right;
}
Related
I really need some help with CSS.
I'm trying to style a table and I'm having difficulties adding borders.
Here's the table style I'm going for (Photoshopped): https://ibb.co/hFkCkDg
Adding a border around the table is simple:
.table-class {
border: 1px solid #dddddd !important;
padding: 20px !important;
border-radius: 5px;
}
Screenshot: https://ibb.co/Fs6qsNv
To add the separating lines inside the table I need to add a top or bottom border to the rows in the table. Rows are tr elements. By default a tr element of a table does not accept borders. So in order to overcome this I added {border-collapse: collapse !important;} to the whole table which allowed me to add borders to rows, but it messed up the border around the whole table. Screenshot: https://ibb.co/Vgfq9jp
Because of {border-collapse: collapse !important;}, the properties border, padding, border-radius don't work for the table.
Which means I can either add a border around the whole table or add the separating lines, but not both.
How can I achieve the look I'm going for?
I'd go using flexbox, and setting flex: 1 or flex-grow: 1 to the first child of each "row":
* {margin:0; box-sizing: border-box;}
body {font: 16px/1.4 'Varela Round', sans-serif; padding: 20px;} /* DEMO ONLY */
/*
Order
*/
.Order {
border-radius: 5px;
border: 1px solid #ddd;
padding: 10px 25px
}
.Order-price {
display: flex;
border-bottom: 1px solid #ddd;
}
.Order-price > * {
padding: 10px 0;
}
.Order-price > *:first-child{
flex: 1;
}
.Order-price:last-child {
border-bottom: none;
}
.Order-price--sub {
font-size: 1.2em;
font-weight: 500;
}
.Order-price--tot {
font-size: 1.4em;
font-weight: 700;
}
/*
Colors
*/
.color-lighter {
color: #999;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<div class="Order">
<div class="Order-price">
<span class="color-lighter">Custom Tatoo Design - Small × 1</span>
<span><s class="color-lighter">$99.00</s> <b>$80.00</b></span>
</div>
<div class="Order-price Order-price--sub">
<span>Subtotal</span>
<span>$80.00</span>
</div>
<div class="Order-price Order-price--tot">
<span>Total</span>
<span><small>USD</small> $80.00</span>
</div>
</div>
working with table border is boring, my suggestion is to use the border in td/th elements.
I created this table without style, only solving the problem of borders
.table-class {
border: 1px solid #dddddd;
border-radius: 6px;
padding: 30px;
border-spacing: unset;
font-family: sans-serif;
font-size: 1.5em;
}
.table-class thead th {
border-bottom: 1px solid #dddddd;
text-align: left;
}
.table-class tbody td {
border-bottom: 1px solid #dddddd;
}
.table-class td:last-child, .table-class th:last-child {
text-align: right;
}
.table-class th, .table-class td{
padding: 10px;
}
<table class="table-class">
<thead>
<tr>
<th>Custom Tattoo Desing - Small x 1</th>
<th>
<span><s>$99.00</s></span>
<span>$80.00</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Subtotal</td>
<td>$80.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>USD $80.00</td>
</tr>
</tfoot>
</table>
I am arranging my CSS stylesheet for a responsive website, and some elements become hidden under a given screen width (please see the media query in CSS code).
The problem occurs when I have to hide a table column (th, td both identified by a class) for a certain table, whereas the layout of all my tables uses selectors such as last-of-type or last-child, without any class indication. Here, the class which is hidden is .teacher.
I can not make it work with attached CSS, the line I am struggling with is the following:
table.rounded thead th:last-of-type:not([style*='display: none'])
It's my first time so far using the not() selector, and as far as I know CSS is sometimes sensitive to spaces in the selector combination, so as I could spend much time trying to fix syntax whereas it is a misuse issue, or vice versa, I am requesting for support.
I'm looking for:
a way to fix the mistake(s) my combination of selectors, if any. Or
know why it wouldn't work in any way.
otherwise, find an alternative combination of selectors, even if it
is long.
In both cases, I don't want a solution using JS as I have the constraint of not using JS. If there is no solution to above, I will find a turnaround (additional class / IDs, font size/color, width, etc.).
body {
background-color: #ffffff;
/* White */
}
* {
font-family: palatino, verdana;
word-wrap: break-word;
}
em {
font-style: normal;
font-weight: bold;
}
strong {
/* bold by default */
}
p {
color: #000000;
/* Black */
}
.centered {
text-align: center;
}
th.hours,
td.hours {
width: 120px;
}
td.hours {
font-size: 0.9em;
}
th.teacher,
td.teacher {
min-width: 90px;
max-width: 130px;
}
td.teacher {
font-size: 0.9em;
}
/* Section */
section {
float: center;
border: solid black 1px;
background-color: blue;
padding: 5px;
-webkit-border-radius: 0px 0px 8px 8px;
/*Safari,Opera,Chrome*/
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
}
section p {
color: #000000;
/* Black */
font-size: 1em;
}
section table {
float: center;
max-width: 90%;
margin: auto;
border-collapse: collapse;
/* does not work with property Radius */
border-spacing: 0px;
}
section table th {
background-color: silver;
/*gray*/
}
section table td {
background-color: #ffffff;
/* White */
}
section table th,
section table td {
color: #000000;
/* Black */
font-size: 1em;
margin: 5px 0px 3px 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
vertical-align: middle;
text-align: left;
}
/* Table with rounded corners */
/* - borders */
table.rounded {
border-collapse: separate;
}
table.rounded tr {
border: 0px;
}
table.rounded th,
table.rounded td {
border-top: 1px solid black;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid black;
}
table.rounded th:first-of-type,
table.rounded td:first-of-type {
border-left: 1px solid black;
}
table.rounded tr:last-of-type td {
border-bottom: 1px solid black;
}
table.rounded td.afterrowspan {
/* follows in next tr, after the tr including the td which has rowspan defined */
border-left: 0px;
}
/* - corners */
table.rounded thead th:first-of-type {
/* 10px 0 0 0 : Top Left, for table with min 2 columns */
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
table.rounded thead th:last-of-type:not([style*='display: none']) {
/* 0 10px 0 0 : Top Right, for table with min 2 columns */
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
table.rounded tbody tr:last-child td:last-child {
/* 0 0 10px 0 : Bottom Right, for table with min 2 columns */
/* tr:last-child td:last-child because tr:last-of-type td:last-of-type doesn't work with IE */
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
table.rounded tbody tr:last-of-type td:first-of-type {
/* 0 0 0 10px : Bottom Left, for table with min 2 columns */
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
/* Mobile - or thin screens - specificities */
#media (max-width: 600px) {
section {
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
}
section table th,
section table td {
font-size: 0.80em;
}
th.hours,
td.hours {
width: 105px;
}
td.hours {
font-size: 0.80em;
}
th.teacher,
td.teacher {
display: none;
}
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link type="text/css" rel="stylesheet" href="style.css">
<title>Courses</title>
</head>
<body>
<section class="element_2">
<p class="centered">
<table class="rounded">
<thead>
<tr>
<th class="centered">Day</th>
<th class="centered hours">Hours</th>
<th class="centered">Course</th>
<th class="centered teacher">Teacher</th>
</tr>
</thead>
<tbody>
<tr>
<td class="centered" rowspan="3"><strong>Monday</strong></td>
<td class="centered hours afterrowspan">19:00 - 20:00</td>
<td><em>How to climb a building</em> (beginners)</td>
<td class="teacher" rowspan="3">The Amazing Spiderman</td>
</tr>
<tr>
<td class="centered hours afterrowspan">20:00 - 21:00</td>
<td><em>How to fall from a building's wall</em> (beginners)</td>
</tr>
<tr>
<td class="centered hours afterrowspan">21:00 - 22:00</td>
<td><em>How to climb a building</em> (experienced)</td>
</tr>
<tr>
<td class="centered" rowspan="2"><strong>Thursday</strong></td>
<td class="centered hours afterrowspan">19:00 - 20:30</td>
<td><em>How to stay calm</em> (beginners)</td>
<td class="teacher" rowspan="2">The Incredible Hulk</td>
</tr>
<tr>
<td class="centered hours afterrowspan">20:30 - 22:00</td>
<td><em>How to stay calm</em> (experienced)</td>
</tr>
<tr>
<td class="centered"><strong>Friday</strong></td>
<td class="centered hours">19:00 - 22:00</td>
<td colspan=2>Description of various events in a loooooooooooonger text. Longer than that. About this long.</td>
</tr>
</tbody>
</table>
</p>
</section>
</body>
</html>
I have a css which works perfectly:
.border
{
border: 1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
.clean
{
border: none;
font-size: 14px;
}
No problem. But to create a table with border I will have to do:
<table class="border">
<tr>
<td class="border"></td>
<td class="border"></td>
</tr>
I find this brutally tedious. Isn't there a way to go:
<table class="border">
<tr><td></td><td></td></tr>
with the same result as the above?
I want an "excel-like" square grid, not only a border around the table (second example).
Pls help.
Yes there is:
.border { /* matches all element with that class */
border-collapse: collapse; /* excel like (collapse cells border together) */
border:1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
.border td { /* matches all td which have "border" in a parent class element */
border:1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
`
You don't need to apply the class inside all your tds. Just use like this:
table.border,table.border td{//Applying border in table html
border: 1px solid black;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hopefully this is a simple one:
I have 2 tables one over the other, but don't want the box shadows being cast on each other. Is there a way to resolve this? I've not had any luck with z-index.
I've included all my CSS code, just encase something there is relevant — Example.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body {
color: rgb(000,000,000);
background: rgb(256,256,256);
background: -webkit-linear-gradient(rgb(42,109,142), rgb(111,197,228));
background: -moz-linear-gradient(rgb(42,109,142), rgb(111,197,228));
background: linear-gradient(rgb(42,109,142), rgb(111,197,228));
height: 800px;
background-repeat: no-repeat;
background-color: rgb(111,197,228);
font-family: verdana, arial, sans-serif;
font-size: small;
}
table {
word-wrap: normal;
border-style: outset;
border-width: 0px;
border-style: solid;
border-color: rgb(75,75,75);
margin-left: auto;
margin-right: auto;
color: black;
width: 400px;
font-family: verdana, arial, sans-serif;
font-size: small;
text-align: right;
vertical-align: text-top;
padding: 15px;
border-radius:0px;
background-color: rgb(256,256,256);
box-shadow: 5px 5px 15px rgb(50,50,50);
}
tr {
border: solid;
border-width: 2px 0;
}
table tr:nth-child(odd) td{
background-color: rgb(202,233,244);
vertical-align: text-top;
}
table tr:nth-child(even) td{
background-color: rgb(80,183,222);
vertical-align: text-top;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
th {
white-space: nowrap;
text-align: center;
color: rgb(20,85,109);
}
<table>
<tr>
<td>
blah
</td>
<td>
blah
</td>
<td>
blah blah blah blah
</td>
</tr>
</table>
<table>
<tr>
<td>
blah
</td>
<td>
blah
</td>
</tr>
</table>
I'm not sure if this meets your needs but one option is to add a pseudo-element having a white background color to the 2nd, 3rd, ... tables — using adjacent sibling combinator + as table + table::after — in order to cover the shadow between tables.
Example Here
table {
/* other declarations... */
padding: 15px;
background-color: white;
box-shadow: 5px 5px 15px rgb(50,50,50);
position: relative;
}
table + table::after { /* to target adjacent table elements */
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 10px;
background-color: white;
z-index: 10;
}
A few ways to go outlined here:
1) just put it all in one table, but use <tbody> to separate things or use colspan to have different content,
2) use a pseudo class like table:last-child, or table:last-of-type or table:nth-child(x) - to differentiate and put a different drop shadow on the last table and then for the general drop shadow use a different one that just highlights the right side of the table, or
3) make a div wrapper to all the tables, put the drop shadow on that, remove the drop shadow on the tables.
You don't have this type of control over box-shadow. The best you can do is to change the shadow position for tables immediately preceded by another table:
table~table {
box-shadow: 5px 10px 15px rgb(50,50,50);
}
Please note that it does make the shadow a little different
https://jsfiddle.net/vk45mnb6/5/
Other possible solution is to have a wrapper div. You can then then apply the box-shadow to it:
HTML
<div class="table-wrapper">
<table>
[...]
</table>
<table>
[...]
</table>
</div>
CSS
div.table-wrapper {
box-shadow:5px 5px 15px rgb(50,50,50);
}
div.table-wrapper > table {
box-shadow: none;
}
You have to position the elements with relative to use z-index. With a box-shadow spread of 15, and two adjacent elements, you're going to have some overlap. If you reduce it to 5, the shadow doesn't overlap. See that solution below:
Your CSS:
table {
word-wrap: normal;
border-style: outset;
border-width: 0px;
border-style: solid;
border-color: rgb(75,75,75);
margin-left: auto;
margin-right: auto;
color: black;
width: 400px;
font-family: verdana, arial, sans-serif;
font-size: small;
text-align: right;
vertical-align: text-top;
padding: 15px;
border-radius:0px;
background-color: rgb(256,256,256);
position: relative;
}
#table-1 {
box-shadow: 5px 0 5px 0 rgb(50,50,50);
}
#table-2 {
box-shadow: 5px 5px 5px 0 rgb(50,50,50);
z-index: 99;
}
Your HTML:
<table>
<tr>
<td>
blah
</td>
<td>
blah
</td>
<td>
blah blah blah blah
</td>
</tr>
</table>
<table>
<tr>
<td>
blah
</td>
<td>
blah
</td>
</tr>
</table>
Putting both of the tables inside of a div with a shadow would be a better approach. This would ensure there isn't a gap between the horizontal shadow on the right side (seen in the example above).
I started looking into CSS more deeply and decided I would like to convert my site's html that mainly consists of tables to divs.
I'm trying to accomplish the same thing with divs as with tables on this test page. But I'm having a few problems:
Couldn't make columns
Vertical text alignment
How far I've gotten:
Code:
<style type="text/css">
body {
background-color:#000;
}
/* TABLE CSS */
td {
font-family: Tahoma;
font-size: 12px;
}
.line {
border-collapse:separate;
border:1px solid #222222;
border-spacing:1px 1px;
margin-left:auto;
margin-right:auto;
background-color: #000000;
padding: 1px;
width:400px;
}
.topic {
background-color:#3C0;
font-weight: bold;
height: 23px;
color:#FFF;
text-align:center;
}
.row {
background-color: #111111;
border-bottom: 1px solid black;
color: #ffffff;
height:12px;
line-height:21px;
padding:0px;
}
.row:Hover {
background-color: #252525;
}
/* DIV CSS */
div.line {
border-collapse:separate;
border:1px solid #222222;
border-spacing:1px 1px;
align:center;
background-color: #000000;
padding: 1px;
width:400px;
}
div.topic {
background-color:#3C0;
font-family: Tahoma;
font-size: 12px;
height: 23px;
font-color:#FFF;
text-align:center;
}
div.row {
background-color: #111111;
border-bottom: 1px solid black;
color: #ffffff;
padding:6px;
font-family: Tahoma;
font-size:12px;
}
div.row:Hover {
background-color: #252525;
}
</style>
<body>
<table class="line">
<tbody>
<tr>
<td class="topic" colspan="3">Table</td>
</tr>
<tr class="row">
<td width="20%" align="left">Test</td>
<td width="20%" align="center">1</td>
</tr>
<tr class="row">
<td align="left">Test</td>
<td align="center">2</td>
</tr>
</tbody>
</table>
<p>
<div class="line">
<div class="topic">Div</div>
<div class="row">Test</div><div class="row">1</div>
<div class="row">Test</div><div class="row">2</div>
</div>
</p>
It's good to see that you are converting tables into divs, however make sure you only do this where necessary.
If the data on the page is tabular, then it makes sense for this to be put in a table element.
Div's are for layout and structure, table's are for displaying tabular data.
A collegue of mine once spent ages building a forum out of divs which followed a table structure. This was all because he'd been told "tables are bad, use divs and CSS". It's important to remember this is only referring to layout structure.
If your structure has rows and columns, then use a table. tables are still valid useful HTML elements, and are far from deprecated.
Here you go:
HTML:
<div id="wrap">
<h2> Div </h2>
<div class="section">
<div> Test </div>
<div> 1 </div>
</div>
<div class="section">
<div> Test </div>
<div> 2 </div>
</div>
</div>
CSS:
#wrap {
border: 2px solid #333;
padding: 2px;
}
h2 {
background: green;
color: white;
text-align: center;
font-weight: bold;
padding: 4px 0;
}
.section {
overflow: auto;
margin-top: 2px;
}
.section > div {
float:left;
width: 50%;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #333;
color: white;
padding: 4px 0;
}
.section > div + div {
text-align: center;
border-left: 2px solid black;
}
Live demo: http://jsfiddle.net/jNQrM/1/
Get a good book - I recommend CSS: The Missing Manual (Missing Manuals)
look up float a long with display esp relative
Put float:left; on this class :
div.row
Take a look to the css display property.
.line {
display: table;
}
.row {
display: table-cell;
}
But you should get some problems with internet explorer. In that caase you could use display: inline; with a zoom:1;