Incorporate new styling elements into the parent component

Question

Incorporate new styling elements into the parent component

Can someone explain why this particular CSS code is adding padding to all tables on the page instead of just the one with a specific class?

CSS:

.tableclass th, tr, td {padding: 8px;}

HTML:

<table class="tableclass>
<th>Header Text</th>
<tr>
<td>Content</td>
<tr>
</table>

I have 3 tables on the page, and they all seem to be affected by the 8px padding rule specified for tableclass. I only want this padding to apply to the specific table with the tableclass. It's as if there's a global padding being set for all table elements!

css styles parent

Answer 1

Answer №1

Here is an example:

.classofTable th, tr, td {padding: 8px;}

This can also be written as:

.classofTable th {padding: 8px;}
tr {padding: 8px;}
td {padding: 8px;}

Therefore, the code above adds 8px padding to all th elements within the .classofTable class, as well as to all tr and td elements.

Following Rohit Azid's suggestion, you should structure it like this:

.classofTable tr,
.classofTable th,
.classofTable td {
  padding: 8px;
}

(In the case that you do not want padding on the table-row element, adjustments may need to be made accordingly)

Answer 2

Here is an example:

.classofTable th, tr, td {padding: 8px;}

This can also be written as:

.classofTable th {padding: 8px;}
tr {padding: 8px;}
td {padding: 8px;}

Therefore, the code above adds 8px padding to all th elements within the .classofTable class, as well as to all tr and td elements.

Following Rohit Azid's suggestion, you should structure it like this:

.classofTable tr,
.classofTable th,
.classofTable td {
  padding: 8px;
}

(In the case that you do not want padding on the table-row element, adjustments may need to be made accordingly)

Answer 3

Answer №2

Can you verify that all the HTML tags are closed correctly? You may also want to experiment with applying different CSS classes to the other two tables.

Answer 4

Can you verify that all the HTML tags are closed correctly? You may also want to experiment with applying different CSS classes to the other two tables.

Answer 5

Answer №3

You used to apply CSS for styling the table in this way:

.tableclass th, .tableclass tr td{
padding:8px;
}

If you want to add padding to your table, just use the class like this:

<table class="tableclass">
<th>Header Text</th>
<tr>
<td>Content</td>
<tr>
</table>

Check out the live demo here.

Answer 6

You used to apply CSS for styling the table in this way:

.tableclass th, .tableclass tr td{
padding:8px;
}

If you want to add padding to your table, just use the class like this:

<table class="tableclass">
<th>Header Text</th>
<tr>
<td>Content</td>
<tr>
</table>

Check out the live demo here.

Incorporate new styling elements into the parent component

Answer №1

Answer №2

Answer №3

Similar questions

Creating a centered and beautifully styled picture with a specific maximum size using React

Ways to expand HTML input fields to fill the whole table cell

Flex items refusing to wrap in Firefox

Extremely efficient CSS utility classes for supreme performance

Adjusting text to fit alongside an undefined image's width

Email Embedder - Incorporating HTML source code into email communications

The header of the data table does not adapt well to different screen

What causes variations in layouts when using the same CSS grid code across different pages?

Create a line with elements that end on the next line without taking up the full width

Opera browser encountering issue with styled image overlay in select list

Looking for ways to increase the speed of rendering in the basic window system using HTML5 and CSS3?

Check out the page design for section one!

Is it possible to manipulate class attributes using an if statement in your code?

Silence echoes upon the jQuery post

Challenges arising from CSS position: fixed on iPhone 6+ in landscape orientation running iOS 9

Are you struggling with the issue of Function components not being able to be given refs? When you try to access the ref, it just fails. Perhaps you should consider using React.forwardRef

Continuous animation for a sequence of overlapping images with smooth transitions

What is the most crucial element to focus on when initially building a website?

Transferring Chart Div Titles Above Bars

Remove the space gap between the header and card in Bootstrap