I have the the following table structure, but I want to change it to this table structure.
I have looked at posts on SO and other places but have not been able to find a solution. Is this possible using css? This SO posts is the closest I have found but it still does not work as needed.
Can someone please guide me on how to approach this?
You can use one table per row as a workaround, with CSS for the borders as shown below:
table {
border-collapse: collapse;
width: 100%;
}
td {
padding: 4px;
border: 1px solid #ccc;
border-bottom: none;
}
table:last-of-type td {
border-bottom: 1px solid #ccc;
}
<table>
<tr>
<td>Test Test Test Test Test Test</td>
<td>Test Test</td>
<td>Test Test Test Test</td>
</tr>
</table>
<table>
<tr>
<td>Test Test</td>
<td>Test Test Test Test</td>
<td>Test Test Test Test Test Test Test</td>
</tr>
</table>
Using flex you can do this with align-items: stretch;
#container {
width: 200px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
#container div {
height: 30px;
border: solid 1px black;
margin: 5px;
}
<div id="container">
<div style="width: 80px;"></div>
<div style="width: 35px;"></div>
<div style="width: 35px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
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>
I'm trying to size a single td in a table row.
<table>
<tr>
<td>
<span>1</span>
</td>
<td marked="true"> <!-- Should be 80px height and width -->
<span>2</span>
</td>
<td>
<span>3</span>
</td>
</tr>
</table>
Now all my td's have 60px height and the width is set through js.
I want to set the marked="true" td to 80px height and width and all other td's should stay at 60px height.
I'm able to resize the marked="true" td but the problem is, that all other tds heights are resized too and this should not happen.
I tried it with the td height and width attributes, with css and tried to size the span, but none of them work.
Is this somehow possible?
Help would be greatly appreciated.
EDIT
This is how it looks like now:
It is a navigable days table.
The blue bordered td should be 80px height and width.
And the others shoult be vertically aligned to it.
I think it's best not to use a table.
Instead I would use something like the following HTML:
<div id="dayList">
<div>7</div>
<div>8</div>
<div data-marked="true">9</div>
<div class="Weekend">10</div>
<div class="Weekend">11</div>
</div>
and the following CSS:
#dayList {
display: flex;
flex-flow: row nowrap;
align-items: center;
align-content: center;
}
#dayList > div {
flex: 0 0 60px;
margin: 1px;
border: 1px solid #CCC;
width: 60px;
height: 60px;
background-color: #EEE;
text-align: center;
line-height: 60px;
}
#dayList > div.Weekend {
background-color: #CCC;
}
#dayList > div[data-marked=true] {
flex: 0 0 80px;
border: 1px solid #00F;
width: 80px;
height: 80px;
line-height: 80px;
}
It would look like this:
Add a class to td.
.big {
height: 80px;
width: 80px;
}
<table>
<tr>
<td>
<span>1</span>
</td>
<td class="big" marked="true">
<!-- Should be 80px height and width -->
<span>1</span>
</td>
<td>
<span>1</span>
</td>
</tr>
</table>
Maybe this:
<table>
<tr>
<td></td>
<td rowspan="3" marked="true" class="marked" width="80" height="80">test</td>
<td></td>
</tr>
<tr>
<td>
<span>1</span>
</td>
<td>
<span>1</span>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
CSS:
td {
border: 1px solid green;
}
It seems this works as expected, added class .narrow:
.narrow {
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}
https://jsfiddle.net/rinatoptimus/4hw1a8f3/
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 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