Q337- CSS Table Styling & Selectors – Common Interview Problems with Solutions.

1. How to add borders in a <table> tag?

Solution:
Use border-collapse: collapse on table and apply border on table, th, and td.

<table style="border-collapse: collapse;">
  <tr>
    <th style="border:1px solid #000;">Name</th>
    <th style="border:1px solid #000;">Age</th>
  </tr>
</table>

or 

<table border="1">
</table>

---

2. Can we apply styling in <tr> tag of a table?

Solution:
Yes, styling like background-color, height, etc. can be applied directly to <tr>.

<tr style="background-color: #f2f2f2;">

⚠️ Borders should be applied on td or th, not tr.

---

3. How to merge two columns or rows in a table?

Solution:

• Use colspan to merge columns
• Use rowspan to merge rows

<td colspan="2">Merged Columns</td>
<td rowspan="2">Merged Rows</td>

---

4. Create a 2×3 matrix table

Solution:

<table border="1">
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
</table>

---

5. Which element will be selected by p:nth-child(2)?

<div>
  <h1>Title</h1>
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
</div>

p:nth-child(2) {
  color: red;
}

Answer:
✅ First Paragraph will be selected because it is the second child of the div.

---

6. Which CSS rule will apply to <div class="box primary"></div>?

.box.primary {
  background: green;
}

.box .primary {
  background: green;
}

Answer:
✅ .box.primary will apply.

Reason:

• .box.primary → same element having both classes
• .box .primary → .primary inside .box (descendant selector)

---

Conclusion

These questions test HTML structure clarity and CSS selector understanding, which are extremely common in frontend interviews, MCQs, and machine tests.