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/
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>
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>
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