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%;
}
Related
I created a table with gutenberg.
The HTML file looks like this
<figure class="wp-block-table alignright">
<table>
<tbody>
<tr>
<td class="has-text-align-left" data-align="left">text</td>
<td>text</td>
</tr>
<tr>
<td class="has-text-align-left" data-align="left">text</td>
<td>text</td>
</tr>
</tbody>
</table>
<figcaption>my table</figcaption>
</figure>
Then I push the HTML to DomPDF to create a PDF, but the table is not "right aligned".
Is it possible to create a CSS style to display the table on the right, while leaving the caption centered ?
i have tried such code, but no luck
figure {
border: 1px solid red;
width: 100%;
margin: 0px;
text-align: center;
}
.alignright table {
border-collapse: collapse;
margin-left: auto;
}
td {
border: 1px solid green;
}
Thanks
You can use flexbox to align the items, and flex:1 to adjust the space of the item.
figure {
border: 1px solid red;
width: 100%;
margin: 0px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
.alignright figcaption {
flex:1;
}
td {
border: 1px solid green;
}
<figure class="wp-block-table alignright">
<table>
<tbody>
<tr>
<td class="has-text-align-left" data-align="left">text</td>
<td>text</td>
</tr>
<tr>
<td class="has-text-align-left" data-align="left">text</td>
<td>text</td>
</tr>
</tbody>
</table>
<figcaption>my table</figcaption>
</figure>
This would be really easy using negative margins, but I can't use them inside a <table>. Been at this for hours last night and this morning. Already googled different types of navs and there's nothing like this.
How do I make the CSS arrow stick to the top and bottom of the vertical line? https://codepen.io/TylerL-uxai/pen/ZqYNjw
td {
padding-top: 10px;
padding-bottom: 10px;
}
.active {
font-weight: bold;
}
table {
border-collapse: collapse;
}
.right{
text-align: right;
border-right: 1px solid black;
}
.v {
text-align: right;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div class="menu">
<table>
<tr>
<td class="v">
<i class="arrow up"></i>
</td>
<td>
Abstract
</td>
</tr>
<tr>
<td class="right">
Why
</td>
</tr>
<tr>
<td class="right">
<div class="active">Home</div>
</td>
<td><span class="dot"></span> <small> You are here.</small></td>
</tr>
<tr>
<td class="right">
Examples
</td>
</tr>
<tr>
<td class="right">
Process
</td>
</tr>
<tr>
<td class="right">
Tools
</td>
</tr>
<tr>
<td class="v"><i class="down"></i></td>
<td style="padding-left: 10px;">
Concrete
</td>
</tr>
</table>
</div>
Position relative and then use top & right negatives
.v {
position: relative;
right:-6px;
top: -15px;
text-align: right;
}
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>
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>