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>
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 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>
Browser does not display td with enough space to hold contents
I have a table cell whose content is a styled a tag. The height of the styled a tag is 29px high, but the content-height attribute of the td cell is 19px, that is the value of line-height for the font that is in use. I see this in the Firefox inspector. The styled a tag is higher than simple text because it has padding and borders. I do not understand why the browser has not included the padding and borders of the content in calculating the height and width of the td tag that is intended to hold the content. I do not want to explicitly set the height of the td in case I later change the style for the a tag. I cannot find any documentation of how the td, or any box, calculates the height of the content-area.
td.odd {
font-family: sans-serif;
background-color: #F8F8F8;
border-right: thin solid black;
border-bottom: thin solid black;
padding: 2px 2px 2px 2px;
empty-cells: show;
}
td.left {
text-align: left;
float: none;
}
td.center {
text-align: center;
float: none;
}
td.right {
text-align: right;
float: none;
}
a.button {
font-family: sans-serif;
font-weight: bold;
font-size: 80%;
text-align: center;
text-decoration: none;
background-color: #E0E0E0;
color: #000000;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 3px solid #606060;
border-right: 3px solid #606060;
padding: 4px 12px 4px 12px;
}
<tr id="location">
<td class="odd right">
<a href="Location.php?id=$IDLR&lang=$LANG" class="button">
Details
</a>
</td>
<td class="odd left">
$LOCATION
</td>
<td class="odd center">
$LOCPRESENT
</td>
<td class="odd center">
$NOTESPRESENT
</td>
<td class="odd center">
$BOUNDPRESENT
</td>
</tr>
An example of the page that is not displaying to my satisfaction is https://www.jamescobban.net/FamilyTree/Locations.php?pattern=%5EZephyr&namefld=
Note how the "button" in the first cell does not fit in the containing table cell.
I would expect the size of the content-area in the td to match the size of the actual element contained in the td. Instead the td is using some fictional element which is only the height of the text.
This is due to the display mode of the content of the cell. <a> elements display inline by default, so their height will be treated as the line height. In your example, try adding display: block or display: inline-block to the a.button rule.
Demo:
table, th, td {
border: 1px solid black;
}
.button {
background: #ddd;
padding: 5px;
border: 2px solid black;
}
.block {
display: block;
}
<h4>Bad Table:</h4>
<table><tr>
<td><a class="button">Button A</a></td>
<td>Another Cell 1</td>
</tr><tr>
<td><a class="button">Button B</a></td>
<td>Another Cell 2</td>
</tr></table>
<h4>Good Table:</h4>
<table><tr>
<td><a class="button block">Button A</a></td>
<td>Another Cell 1</td>
</tr><tr>
<td><a class="button block">Button B</a></td>
<td>Another Cell 2</td>
</tr></table>
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 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