aziz aziz - 6 months ago 12
CSS Question

center a row with one <td> element, when other row has many <td>

I want to center a

<td>
element in a row, when other row has many
<td>
elements. But the first row's
<td>
element always sits in the first column position, and it's not moving to center.

Here is my code sample:



<table border="1">
<tr>
<td>Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>





and here is the result, I want the one element to get in center without having other element, and it should take same width and height of first column elements. Images is here - Result i get

Answer
<table border="1"> 
  <tr>
    <td style="border:5px"></td>
    <td>56</td>
    <td style="border:5px"></td>
  </tr>
   <tr>
    <td>65</td>
    <td>66</td>
    <td>67</td>
  </tr>
  <tr>
    <td>75</td>
    <td>66</td>
    <td>77</td>
  </tr>
  <tr>
    <td>85</td>
    <td>66</td>
    <td>87</td>
  </tr>

</table>

if you want column then you can remove that style part and this is the result enter image description here