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>
Related
I have some writing-mode: vertical-rl text in a table cell. By default, it gets pushed to the left side of the cell, but I want to center it or push it right. If I were handling horizontal-tb text, I would use text-align: center or vertical-align but there doesn't seem to be a corresponding horizontal-align property.
In this example, I want the vertical text centered in the cell:
I am testing this in Firefox 91.
Here is a jsfiddle for the above image: https://jsfiddle.net/a965ej2x/
And the corresponding code:
<table>
<tbody>
<tr>
<th>This is my heading</th>
</tr>
<td>
しょうがない
</td>
</tbody>
</table>
CSS:
td {
writing-mode: vertical-rl;
text-align: center;
vertical-align: middle;
}
td, th {
border: 1px solid black;
}
It seems to be a bug on Firefox that you can fix by adding an extra element where you apply the writing-mode
td {
text-align: center;
}
td span {
writing-mode: vertical-rl;
vertical-align:top; /* remove bottom whitespace */
}
td,
th {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<th>This is my heading</th>
</tr>
<td>
<span>しょうがない</span>
</td>
</tbody>
</table>
This should work.
td {
display: flex;
box-sizing: border-box;
writing-mode: vertical-rl;
width: 200px;
border: 1px solid black;
line-height: normal;
align-items: center;
cursor: text;
}
<table border="1">
<tbody>
<tr>
<th>This is my heading</th>
</tr>
<td>
しょうがない
</td>
</tbody>
</table>
I am finding it difficult in inserting an image into my table cell. When I am trying to completely fill the table cell with an image, The size of the table cell is increasing and taking up the whole page.
Here is my code:
<div id="bar">
<table class = "BarTable" style="width:100%;height: 100%">
<tr>
<td style="width: 35%">
<img src="131AZE.jpg" style="height:100%;width: 100%">
</td>
<td>Everyone</td>
</tr>
</table>
</div>
and the css part is:
#bar {
height:45%;
width: 100%;
}
table.BarTable,th,td {
border:1px solid black;
border-collapse: collapse;
line-height: 0;
}
This is because <table> has a default spacing in cell which we need to clear if not needed.
<table class = "BarTable" style="width:100%;height: 100%" cellpadding="0" cellspacing="0">
You could give the cell with the image the following properties:
width: 1%;
white-space: nowrap;
This will prevent your image from stretching as it does in the code you provided, and the cell will wrap the image perfectly.
Full demo
#bar {
height: 45%;
width: 100%;
}
table.BarTable,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.myclass {
width: 1%;
white-space: nowrap;
}
<div id="bar">
<table class="BarTable" style="width:100%;height: 100%">
<tr>
<td class="myclass"><img src="http://rs902.pbsrc.com/albums/ac222/jvac/pattern-background.png~c200"></td>
<td>Everyone</td>
</tr>
</table>
</div>
There is a little gap between the image and the border of the cell ¿Is this the problem? only you have set td padding:0
#bar {
height:45%;
width: 100%;
}
table.BarTable,th,td {
border:1px solid black;
border-collapse: collapse;
line-height: 0;
padding:0;
}
<div id="bar">
<table class = "BarTable" style="width:100%;height: 100%">
<tr>
<td style="width: 35%"><img src="http://lorempixel.com/400/200/" style="height: 100%;width: 100%"></td>
<td>Everyone</td>
</tr>
</table>
</div>
Please have a look in the following URL:
"http://jsfiddle.net/7rsx0r4h/"
I want the output like the output table with border and should be look like separate box but don't want to change my html (div layout). Also every box i require some space then another box start.
Thanks,
Manish
demo - http://jsfiddle.net/victor_007/7rsx0r4h/1/
added outline for the first div
change body to the parent id or class
body > div {
outline:1px solid #4679bd;
}
changed border color to white so that it looks like empty space
div div {
border-top: 2px solid white;
}
body > div {
outline: 1px solid #4679bd;
}
div {
width: 496px;
border: 2px solid white;
border-top: 0;
color: #fff;
text-align: center;
font-size: 120%;
background: #4679bd;
}
div div {
font-size: 100%;
width: auto;
border: 0;
border-top: 2px solid white;
line-height: 250%;
}
<p>Divs:</p>
<div>
<div>1
<div>1.1
<div>1.2
<div>1.2.1</div>
</div>
</div>
</div>
<div>2
<div>2.1
<div>2.2
<div>2.2.1</div>
</div>
</div>
</div>
<div>3</div>
<div>4</div>
</div>
<br />
<p>Table:</p>
<table border="1px" width="500px">
<tr>
<td>1</td>
</tr>
<tr>
<td>1.1</td>
</tr>
<tr>
<td>1.2</td>
</tr>
<tr>
<td>1.2.1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>3.1</td>
</tr>
</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%;
}
I have a table which is used for showing excel-like data. I need to absolutely position two icons in the top center of each row--I want to show edit/delete icons when the use hovers the mouse over any row.
When I tried adding a relative position to the TR and an absolute positioning my inner floating div, the css disregarding the relative positioning of the parent td and simply floated to the top of the screen:
http://jsfiddle.net/85aTs/2/
HTML
<table>
<tr>
<td>
fooasfdasdfasf
</td>
<td>
barasdfasfas
</td>
</tr>
<tr>
<td>
fooasfdasdfasf
</td>
<td>
barasdfasfas
</td>
<div class="absolute">
I should be in a row
</div>
</tr>
</table>
CSS:
table, td{
border: 1px solid #000;
}
tr {
position:relative;
}
.absolute {
position: absolute;
top: 0;
right: 0;
border: 1px solid #000;
background-color: yellow;
}
I am aware that this is not valid html as it is currently setup, but how can I achieve what I want without switching over to divs with table display properties?
Here's what I would do:
See working jsFiddle demo
HTML
<table>
<tr>
<td>
<div class="icons">
<img class="checkmark" />
<img class="crossmark" />
</div>
<table>
<tr>
<td>fooasfdasdfasf</td>
<td>barasdfasfas</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class="icons">
<img class="checkmark" />
<img class="crossmark" />
</div>
<table>
<tr>
<td>fooasfdasdfasf</td>
<td>barasdfasfas</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
table, td
{
border: 1px solid #000;
}
.icons
{
height: 16px;
text-align: center;
background: #bbb;
}
.checkmark
{
display: inline;
height: 16px;
width: 16px;
border: none;
background: url('http://www.actuary.com/directory/template/default/images/icon_checkmark.gif');
}
.crossmark
{
display: inline;
height: 16px;
width: 16px;
border: none;
background: url('http://researchautism.net/img/rating_icons/crossmark_sm.png');
}
RESULTS