I have a nav menu made using a table with links inside. On chrome and all other browsers, the td elements have no padding, and the inside links can have padding and fill up the whole td element. On Safari there is an added top and bottom padding that is throwing off the spacing of the inner links. How do I remove this extra padding in safari?
html-
<nav>
<div class="container">
<table>
<tr>
<td>Link 1</td>
<td>Link 2</td>
<td>Link 3</td>
<td>Link 4</td>
<td>Link 5</td>
<td>Link 6</td>
<td>Link 7</td>
<td>Link 8</td>
<td>Link 9</td>
</tr>
</table>
</div>
</nav>
css(scss) -
.container {
position: relative;
display: block;
margin: 0px auto;
padding: 0px 20px;
max-width: 1100px;
&:after {
content: "";
display: table;
clear: both;
}
}
nav {
background: $modBg;
border: 1px solid $border;
border-left: 0px;
border-right: 0px;
margin-bottom: 9px;
table {
width: 100%;
tr {
td {
text-align: center;
a {
padding: 15px;
display: inline-block;
width: 100%;
height: 100%;
}
}
}
}
}
and some images showing the difference-
Here's a jsfiddle replicating the problem- https://jsfiddle.net/davmex/m4ea9gLr/
Related
I have a big problem with the spacing of columns in a table.
Here's what I'd like to get, spacing only between <td>:
Not working with margin, padding or border:
td {
padding-left: 7.5px;
padding-right: 7.5px;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
<td></td>
<td></td>
<td></td>
<td></td>
Not working with border-spacing:
And if use first-child and last-child, same problem as previous image.
Solution I found, but really dirty:
.spacer {
width: 15px;
height: 15px;
}
<td></td>
<div id="spacer"></div>
<td></td>
<div id="spacer"></div>
<td></td>
<div id="spacer"></div>
<td></td>
Use border-spacing: 15px 0px to generate only horizontal spacing;
To not display only left and right spacing, you can wrap the table in a div, and set margin: 0px -15px to table. Then, set overflow: hidden; to div how hide extra left and right spacing.
td {
padding-left: 7.5px;
padding-right: 7.5px;
background-color: red;
height: 40px;
border: 1px solid green;
width: 25%;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
table {
width: calc(100% + 30px);
table-layout: fixed;
border-spacing: 15px 0px;
background: green;
margin: 0px -15px;
}
.table-container {
overflow: hidden;
width: 400px;
margin: 0 auto;
}
<div class="table-container">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
1) You must use Standard structure for table when you want work with css on it.
change :
<td></td>
<td></td>
<td></td>
<td></td>
To:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
2) If want space between TDs add border-spacing:30px 0px; to table.
td {
padding-left: 7.5px;
padding-right: 7.5px;
background-color: orange;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
table {
border-spacing:30px 0px;
}
<table>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
</tr>
</table>
Use <div> and margin instead.
.table {
width: 100%;
height: 500px;
}
.row {
width: 100%;
height: 100%;
}
.cell {
float: left; /* make the divs sit next to each other like cells */
background: red;
width: calc(25% - 12px); /* 4 cells so 25% but minus 12 because we have 3 x 15px margins divided by 4 cells which is 11.25 but decimals can cause issues in some browsers */
height: 100%;
margin-left: 15px;
}
.cell:first-child {
margin-left: 0;
}
<div class="table">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
Try to use cellspacing attribute.
<table cellspacing="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
I'm working on a dashboard that has a few containers that are either double the height or width of other elements.
It's pretty straight forward doing this with good ol' tables like this: Fiddle
<table cellspacing="4">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
However, with list items float:left; it seems rather difficult getting the containers to wrap around each other the way I expect them to.
Should I just use tables as in my example, or is there a clean solution to this, wihtout requiring a bunch of work?
I'm lucky enough only having to support Chrome.
I actually wanted to do this using flexbox, but I'll setlle for a float-based solution for now:
section {
display: block;
width: 128px;
padding: 4px 0 0 4px;
background-color: rgb(191,191,191);
}
div {
float: left;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 2px 2px 0;
background-color: rgb(0,0,0);
vertical-align: top;
}
.x2 {
width: 82px;
}
.y2 {
height: 82px;
}
.right {
float: right;
margin: 0 4px 2px 0;
}
section::after {
content: '';
display: block;
width: 2px;
height: 2px;
clear: both;
}
<section>
<div class="y2"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="y2 right"></div>
<div class="x2"></div>
</section>
I have a table with 3 columns. I'd like to remove the border/cellspacing between the first and second columns, and make it appear like one column.
Fiddle: https://jsfiddle.net/o8x3ego0/1/
HTML
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>
In the above example, I'd like to remove the spacing between the 1st and 2nd columns in the data rows.
You can remove the border from the entire table by:
table {
border-collapse: collapse;
}
Then to add borders to the rows, table headers and the last table cells (or whatever table cells necessary by using :nth-child):
tr, th, td:last-child {
border: 1px solid black; /* changed to black to be more noticeable */
}
Then remove padding from the table header and table cells:
th, td {
padding: 0;
}
Here is the updated fiddle.
edit: it was col and not row, so i believe this is more like this : https://jsfiddle.net/o8x3ego0/6/ (same method, but padding to draw the hole in between th )
you can use
border-collapse to remove cellspacing and to allow style tr borders
a line-height to th instead padding
draw a transparent border at bottom of th (padding works too)
and erase bg color with background-clip to mimic the border-spacing only where you want to
body {
background-color: white;
}
/* demo */
tr:nth-child(1) th {
border-bottom: 3px solid transparent;
background-clip: content-box
}
table {
border-collapse: collapse;
}
/* end */
.table {
margin-bottom: 20px;
}
.table-responsive {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.currencyHolder {
padding: 7px;
border-radius: 5px;
border-width: 2px;
border-style: solid;
margin-top: 10px;
margin-bottom: 10px;
max-width: 36px;
text-align: center;
}
.currency {
border-radius: 5px;
color: white;
font-size: 11px;
font-weight: bold;
}
.greenCurrencyHolder {
background-color: green;
border-color: darkgreen;
}
.greenCurrency {
background-color: darkgreen;
}
.blueCurrencyHolder {
background-color: azure;
border-color: cadetblue;
}
.blueCurrency {
background-color: cadetblue;
}
#holdingsDistributionTable {
display: table;
/*width: 100% !important;*/
}
#holdingsDistributionTable th {
background-color: #F4F5F6;
color: #AAABAE;
line-height: 2.5em;
/* instead vertical padding */
width: 25%;
font-weight: normal;
}
#holdingsDistributionTable th:last-child,
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: #A19D9E;
}
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: black;
}
#holdingsDistributionTable th,
#holdingsDistributionTable td {
min-height: 15px;
background-color: #F4F5F6;
}
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>
The best solution would be to make your table only two columns in the first place and do not use colspan="2" then make the stylized currency abbreviation line up with the currency name by setting the two div in each column inline block items using display: inline-block; in your CSS
Fiddle: https://jsfiddle.net/f30tujzn/
this solution is not only easier then removing part of your border but will render faster, and respond better on smaller devices.
Here's a JSFiddle that has a simple table from an internal CMS:
<table class="rotated-text">
<thead>
<tr>
<th>property</th>
<th>San Francisco, CA</th>
<th>New York, NY</th>
<th>Washington, DC</th>
<th>Charlottesville, VA</th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>260</td>
<td>200</td>
<td>210</td>
<td>220</td>
</tr>
</tbody>
</table>
I'd like to rotate the text in all but the first element by 45 degrees counterclockwise, but without also bringing along the background. I'm also hoping I can do this without changing the HTML -- only applying CSS. The result should look similar to this:
Is that possible?
How about this. Needed some additional wrapper elements. Add your background image to your <th>.
.rotated-text {
border-collapse:collapse;
}
.rotated-text td {
text-align:right;
border: 1px solid #ccc;
}
.rotated-text tbody tr > :first-child {
border-top:none;
border-left:none;
border-bottom: 1px solid #ccc;
}
.rotated-text th {
height: 140px;
white-space: nowrap;
background-color: lightblue;
background-image:url("https://upload.wikimedia.org/wikipedia/en/b/b1/Portrait_placeholder.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.rotated-text th > div {
transform: translate(25px, 51px) rotate(315deg);
width: 35px;
position:relative;
float:right;
margin-right:5px;
}
.rotated-text th > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
<table class="rotated-text">
<thead>
<tr>
<th><div><span>property</span></div></th>
<th><div><span>San Francisco, CA</span></div></th>
<th><div><span>New York, NY</span></div></th>
<th><div><span>Washington, DC</span></div></th>
<th><div><span>Charlottesville, VA</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
Here goes my try ...
Not sure about the background that you want to get... Is it the background of the th ? Looks a little ugly .
The borders are real borders, but on a pseudo element of the first row of tds
th:nth-child(n+2) {
border-color: transparent;
transform: translateX(100%) rotate(-45deg);
transform-origin: left bottom;
}
td {
border: solid 1px black;
position: relative;
}
.rotated-text {
margin-top: 100px;
border-collapse: collapse;
}
tr:first-child td:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
background-color: lightblue;
bottom: 100%;
z-index: -1;
left: 0px;
}
tr:first-child td:nth-child(n+2):before {
content: "";
position: absolute;
height: 100%;
width: 100%;
bottom: 100%;
left: 0px;
border-bottom: solid 1px black;
transform: translateX(100%) rotate(-45deg);
transform-origin: left bottom;
}
<table class="rotated-text">
<thead>
<tr>
<th>property</th>
<th>San Francisco, CA</th>
<th>New York, NY</th>
<th>Washington, DC</th>
<th>Charlottesville, VA</th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
The closest I could come was to dispense with the borders and the border-spacing in the table. Giving the borders the style you need may be unattainable. The lines between the ths I simulated with an underline.
.rotated-text {
border-spacing: 0;
}
.rotated-text thead > tr {
background-color: lightblue;
}
.rotated-text th {
height: 9em;
max-width: 3em;
text-align: left;
white-space: nowrap;
transform: rotate(-45deg) translateX(-1.5em) translateY(2.5em);
text-decoration: underline;
}
.rotated-text th:first-child {
transform: rotate(-45deg);
}
.rotated-text td {
text-align: center;
}
<table class="rotated-text">
<thead>
<tr>
<th>property</th>
<th>San Francisco, CA</th>
<th>New York, NY</th>
<th>Washington, DC</th>
<th>Charlottesville, VA</th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
So it's not perfect, and if other people could improve on this, I'd be interested in that solution too!
Alright, this the closest I can get. Using box shadow to draw the line for the th.
http://jsfiddle.net/vcbkport/
table {
margin-top: 100px;
border-collapse: collapse;
}
th {
box-shadow: 0 4px 0 -2px grey;
transform: rotate(-45deg);
transform-origin: 0 0 0;
text-align: left;
text-indent: 10px;
white-space: nowrap;
}
td {
border: 1px solid grey;
}
<table>
<thead>
<tr>
<th>property</th>
<th>San Francisco, CA</th>
<th>New York, NY</th>
<th>Washington, DC</th>
<th>Charlottesville, VA</th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
I have to make in html a calendar. I want to make this with tables.
All I want is the "2" to be in the same line with the others elements(3,4,5...etc).
Code:
<table class="calendar-program col-md-12">
<thead>
<tr>
<th>L</th>
<th>M</th>
<th>M</th>
<th>J</th>
<th>V</th>
<th>S</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2
<div class="clearfix"></div>
<small class="event-calendar">1 event</small>
</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
CSS:
table.calendar-program >tbody> tr>td{
width: 14%;
border: 1px solid #000;
text-align: center;
}
small.event-calendar{
clear: both;
color: #000!important;
font-size: 10px;
}
Demo
You can add vertical-align: top; to the CSS for your td.
That will give you a layout like this:
You can make a nicer, more controlled result with positioning, like this: http://jsfiddle.net/B32Cc/
table.calendar-program >tbody> tr>td{
width: 14%;
border: 1px solid #000;
text-align: center;
position: relative;
padding: 10px 15px;
}
small.event-calendar{
clear: both;
color: #000!important;
font-size: 10px;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
}