Category: CSS

To reset/remove CSS styles for element only, we set the all property.

For instance, we write

#someselector {
  all: initial;
}

#someselector * {
  all: unset;
}

to select the element with ID someselector and the elements inside.

We use all: initial; to reset the styles for the element with ID someselector.

And we use all: unset; to reset the styles for the elements inside the element with ID someselector.

To set up fixed width for td with CSS, we set the width property.

For instance, we werite

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width: 8.33%">Col 5</th>
</tr>

to set the width of each th element to the width we want with the width property.

To set CSS text-overflow in a table cell, we set the max-width of the cell.

For instance, we write

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

to set the max-width to 100px set the max width of the cells.

And we add the text-overflow: ellipsis; and white-space: nowrap; to keep the text to one row and put ellipsis after the truncated text.

We then add overflow: hidden; to hide text overflowing outside the cells.

To align an element to the bottom with flexbox with CSS, we set the flex-grow property.

For instance, we write

p {
  flex-grow: 1;
}

to make the p element fill all available space with flex-grow: 1;.

To fix CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue, we change the overflow-x and overflow-y properties.

For instance, we write

div {
  overflow-x: visible;
  overflow-y: clip;
}

to set overflow-y to clip to stop extra vertical scrollbar from showing in the wrapper element.