css - 表格中的标题居中

Question

我希望表格的标题居中。现在它们居中但不成比例。它们都从表格的中间开始，但它们都向左对齐，而标题的中心应该对齐。

    <table class="prijslijsttable">
<th>Gelaat (epilaties niet inbegrepen)</th>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Mini-verzorging (40 min)</td>  <td class="rl">&#8364; 42,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Aangepaste verzorging (1u15 min)</td>  <td class="rl">&#8364; 55,00</td></tr>
<tr><td> <i>Specifieke verzorgingen :</i></td> <td class="rl"></td> 
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Anti-rimpel</td>  <td class="rl">&#8364; 65,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Extra hydratie</td> <td class="rl">&#8364; 60,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verstevigend lift</td> <td class="rl">&#8364; 75,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Flash lift</td>  <td class="rl">&#8364; 45,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verzorging heren</td> <td class="rl">&#8364; 55,00</td></tr>
</table>

<table class="prijslijsttable">
<th>Epilatie gelaat</th>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen</td>  <td class="rl">&#8364; 7,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen modeleren</td>  <td class="rl">&#8364; 8,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bovenlip</td> <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Kin</td>  <td class="rl">&#8364; 5,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wangen</td>  <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Volledig gelaat</td>  <td class="rl">&#8364; 25,00</td></tr>
</table>

<table class="prijslijsttable">
<th>Epilatie lichaam</th>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Oksels</td> <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderarmen / volledig</td> <td class="rl">&#8364; 15,00 / &#8364; 18,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderbenen / volledig</td>  <td class="rl">&#8364; 17,00 / &#8364; 30,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bikini</td> <td class="rl">&#8364; 15,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Rug</td> <td class="rl">&#8364; 25,00</td></tr>
</table>

CSS:

.prijslijsttable {
  margin: 0px auto;
  padding: 10px 0 0 0;
  width: 994px;
  text-align: left;
}

.prijslijsttable td {
  overflow: hidden;
  border-bottom: 1px dotted #41495D;
}

.prijslijsttable th {
  text-align: center;
} 

Answer 1

您必须使用您的 <th>像这样:<tr><th colspan=2>Title</th></tr>

.prijslijsttable {
  margin: 0px auto;
  padding: 10px 0 0 0;
  width: 994px;
  text-align: left;
}

.prijslijsttable td {
  overflow: hidden;
  border-bottom: 1px dotted #41495D;
}

.prijslijsttable th {
  text-align: center;
  background: gold;
}

.rl {
text-align:right;  
}

<table class="prijslijsttable">
<tr><th colspan=2>Gelaat (epilaties niet inbegrepen)</th></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Mini-verzorging (40 min)</td>  <td class="rl">&#8364; 42,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Aangepaste verzorging (1u15 min)</td>  <td class="rl">&#8364; 55,00</td></tr>
<tr><td> <i>Specifieke verzorgingen :</i></td> <td class="rl"></td> 
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Anti-rimpel</td>  <td class="rl">&#8364; 65,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Extra hydratie</td> <td class="rl">&#8364; 60,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verstevigend lift</td> <td class="rl">&#8364; 75,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Flash lift</td>  <td class="rl">&#8364; 45,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verzorging heren</td> <td class="rl">&#8364; 55,00</td></tr>
</table>

<table class="prijslijsttable">
<tr><th colspan=2>Epilatie gelaat</th></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen</td>  <td class="rl">&#8364; 7,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen modeleren</td>  <td class="rl">&#8364; 8,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bovenlip</td> <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Kin</td>  <td class="rl">&#8364; 5,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wangen</td>  <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Volledig gelaat</td>  <td class="rl">&#8364; 25,00</td></tr>
</table>

<table class="prijslijsttable">
<tr><th colspan=2>Epilatie lichaam</th></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Oksels</td> <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderarmen / volledig</td> <td class="rl">&#8364; 15,00 / &#8364; 18,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderbenen / volledig</td>  <td class="rl">&#8364; 17,00 / &#8364; 30,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bikini</td> <td class="rl">&#8364; 15,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Rug</td> <td class="rl">&#8364; 25,00</td></tr>
</table>