If I create CSS class Table-Cell, it is used for all table cells.
Table-Cell {
padding: 5px;
}
How can I set the padding to 5px for cells in first table column and 10px for cells in the second table column? How can I do that without RowTemplate?
Unfortunately, this is not yet possible in RAP. You could try to enable markup and include some whitespace character like U+2003 to add some padding.
The pseudo class :nth-child is not supported, only those that are defined in the theming reference.
Table-Cell:nth-child(odd) {
padding: 5px;
}
Table-Cell:nth-child(even) {
padding: 10px;
}
try
nth-child
pseudoclass:
table:nth-child(n) { ... }
Related
I am trying to create a webpage.In the footer of the page I have a lists.My code displays the first image whereas it should look like the second image.
What I have coded
What it Should look like
For the code You can see it from github repository :
"https://github.com/nganbarova/Huddle.git"
I'd recommend you use different classes for each LI item and then make use of the ::before pseudoelement. You can then style and move that wherever you need to.
li {
position: relative;
}
li.myClass::before {
content: url('image.png');
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
For an accurate answer, I need to see your code first, but there are some general recommendations for you. if you are using font-awesome you can simply add this to your stylesheet file:
li i { margin-right:5px; } or li fa { margin-right:5px; }
If you are using an image as an icon use this one:
li img { margin-right:5px }
You can change the property value of the margin to any value that works fine for you.
You haven't shown your code, so I'll give you generic and easy to understand methods for indenting. But it would be much more efficient if you pasted your code here.
1 Method using flex:
For the parent container (within which there are points) you specify the exact height and flex rules. These items will be distributed evenly across the container:
parent_selector {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 500px;
}
2 Method using grid:
Grid has a grid-gap rule that sets the spacing without affecting the first element:
parent_selector {
grid-gap: 10px;
}
3 Method using margin and pseudo-class :not and :first-of-type:
Using the :not and :first-of-type pseudo-classes together will allow you to indent every inner element except the first element.
parent_selector p:not(:first-of-type) {
margin-top: 10px;
}
All of these methods are easy to use, but it would be better if you showed your code. If you have any questions, write here in the comments.
I have several tables on a page, and would like to have some space between tables. It is possible that some tables only have empty cells; such tables have a zero-height, in which case I don't want any additional spacing added.
Normally, margin collapsing would do the trick. However, I'm gathering that tables establish a block formatting context (BCF), and that margin collapsing doesn't happen between boxes that establish a BCF.
You can see this running the snippet below: you get a 1em space between "1" and "2", but a 2em space between "2" and "3", while I'd always want to have a 1em space. But how to achieve that?
PS: Some constraints I have to work with: I can't remove the markup for the empty tables or add a class on them. However, I could add a container for each table, such as a <div>. (I was hoping that doing so and moving the margin-bottom on that container would do the trick, but it doesn't, maybe because if a block establishes a BFC, then its parents do as well.) Finally, I could certainly write JavaScript that adds a class with the margin on non-empty tables, but don't consider this to be an acceptable solution.
table { margin-bottom: 1em }
<table><tr><td>1</td></tr></table>
<table><tr><td>2</td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td>3</td></tr></table>
Interesting question. Not an easy one. How about something like this: https://codepen.io/MSCAU/pen/jQLWxL? The spacer is grey to show what's going on:
table {
border-spacing: 0;
}
td {
border: 1px solid grey;
}
td:empty {
display: none;
}
td:not(:empty) {
&:after {
content: '';
display: block;
height: 30px;
width: 10px;
background-color: rgba(99,66,33,0.3);
}
}
You've only got one cell in each table in your example so this works.
So for example I have:
table {
border: 1px solid #ddd;
width: 100%;
}
td {
text-align: right;
}
.special {
font-size: 24px;
}
<table><tr><td>1</td></tr></table>
<table><tr><td>2</td></tr></table>
<table><tr><td>3</td></tr></table>
<table><tr><td>4</td></tr></table>
<table><tr><td class="special">5</td></tr></table>
However for the 5th table I don't want to have the <td> right aligned, I want it to go back to the default <td> values.
In case you're wondering why it's because I'm combining a letterhead that uses a table (it can't use div's for reasons I won't go into right now), and as a result if the other portions include css styles for the table (so that you don't have to define each table, etc.), then the letterhead values take over the styles. I know I could manually overwrite each one but I don't know which styles will be applied beforehand.
Again yes I know it could be done with div tags but ignoring that how can I say don't apply any styles to the td tag in the 5th table? Or is there a way to reset all the defaults in the special definition?
*Update: Keep in mind I'm combining files so the letterhead should be completely self-contained. The reason the td:not won't work is because I would need to specify this in all files that use the letterhead, which means every single file needs to know about the properties of the letterhead.
Use :not()
td:not(.special)
{
text-align: right;
}
Try this -
td:not(.special) {
text-align: right
}
The simplest option here is to use the :not selector:
td:not(.special)
{
text-align: right;
}
Working example: https://jsfiddle.net/wuy6yp59/4/
Another option is to override all properties with unset. This is assuming you do know the properties, but not the default values:
.special
{
font-size: 24px;
text-align: unset;
}
But really, the easiest approach is usually to add a class to all of the non-special tds.
Using not selector, we can apply the style to all tables except one
<style>table:not(.diff)
{
color:#ff0000;
}</style>
<table><tr><td>table1<td></tr></table>
<table><tr><td>table2<td></tr></table>
<table><tr><td>table3<td></tr></table>
<table><tr><td>table4<td></tr></table>
<table class="diff"><tr><td>table5<td></tr></table>
There are two solutions for this.
The first one is use :not (); which is my advice.
The second one is you mention the classes of the table and use this: .firstclass, . secondclass.
Since you want to use the same styles for multiple pages, use this : <link related="stylesheet" href="pagename">. This is the external way of adding css.
Most browsers will display the element with the following default values:
td {
display: table-cell;
vertical-align: inherit;
}
table {
border: 1px solid #ddd;
width: 100%;
}
td {
text-align: right;
}
td.special {
font-size: 24px;
text-align: left;
display: table-cell;
vertical-align: inherit;
}
<table><tr><td>1</td></tr></table>
<table><tr><td>2</td></tr></table>
<table><tr><td>3</td></tr></table>
<table><tr><td>4</td></tr></table>
<table><tr><td class="special">5</td></tr></table>
To know more about td tag.
I think the 'td.special' is going to take the alignment of the parent element. so usually it will be best if you set its own 'text-align' property to the value you want it to be.
say
.special { all: unset;}
With CSS, I'm trying to add 5px padding to tables which do not have the border attribute set to "0". To do this, I'm able to select these tables like this, and test it by making the background color of them red:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
background-color: red;
}
Also, this works to make all tables have padding:
td,th
{
padding: 5px;
}
However, I only want tables with borders to have padding, and this does not work:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
padding: 5px;
}
Does anyone see an issue here? Thanks in advance.
EDIT: I see the code I posted above actually works, I didn't realize that I left out code that broke it, but this is what I tried to get working:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
border: 1px solid rgba(0,0,0,.25);
border-collapse: collapse;
padding: 15px;
}
The border-collapse:collapse; property seems to be causing this problem. Is there any way to have single borders between cells and padding at the same time?
A <table> always has a <tbody> if you don't specify one explicitly in the HTML.
(It would be different in XHTML, but this is HTML, not XHTML.)
Solution: also specify the tbody in the CSS selectors.
table:not([border="0"]), table:not([border="0"])>tbody>tr, table:not([border="0"])>tbody>tr>td
{
padding:15px;
}
See fiddle
By the way, you could remove the middle selector (ending in tr) from the rule, because it doesn't do anything. You can't give padding to table rows.
You say it does work with the first example in your post, but that isn't entirely true. Only the first selector works, giving the whole table the red background, and the other two are ignored, so the cells remain transparent.
Oh, and it's best to not use the border attribute any more. There was a dispute between the WHATWG and the W3C about whether it was still valid, but they finally agreed that it was obsolete.
I want to create an HTML table where each cell is clickable, and clicking on a cell adds a border to the single div within the cell. I want that div's border to exist entirely within the existing confines of the td that contains it, without resizing the table or its cells at all. I can't seem to make this happen correctly.
This previous question seems to address the same issue and points to some articles about the box-sizing CSS options. I have a fiddle where I tried to implement this without success: http://jsfiddle.net/YsAGh/3/.
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
....
</table>
Here's what currently happens. The border causes the containing td to grow to accommodate the div's border.
How can I add the border to the div without it affecting the containing table?
Look at my JSFiddle.
You need to provide a width/height to your cells:
td {
// ...
width:33.3%;
height:33.3%;
}
How about using an inset box-shadow?
.selected {
box-shadow: inset 0px 0px 0px 2px red;
}
OK, since I've seen a some support for my response in the comments, here it as an answer :)
Presize your cell by adding a yellow 'hidden' border to the .unselected state:
CSS
.unselected {
background-color: yellow;
border: 2px solid yellow; // Presize with this yellow border
}
div {
..
line-height: 1; // Add line-height to regulate size (optional)
}
Codepen example.
Using table-layout to fix the width of cells and small padding in selected to prevent increasing height.
table {
table-layout: fixed;
}
.selected {
padding: 1px;
}
See JSFiddle