How to control the width of - tr:nth-child(odd) - html

Question

I am looking at using tr:nth-child(odd) to create a style for my datasheets. the code is below:
Now, my only real question is how do I make it so that I adjust the width? I want it to fill a space that is 200px by 400px
The depth isn't an issue since each row will dictate the depth, but the length does matter. The code I am using now only center aligns it, and I can't seem to find a way to stretch the fields. I know I am missing something, any help would be greatly appreciated.
tr:nth-child(odd) {
background: #4D4D4D}
<div class="black">
<table class="test2">
<tr>
<td>Text</td>
<td>Text2</td>
<td>Text3</td>
<td>Text4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</table>
</div>

Answer 1

CSS Tricks Explanation on TR widths
The only options would be to:
Increase the columns that the row takes up. This could be very fidgety
OR
Do something similar to this example here: Semantic replacement for a table
As someone who prefers semantic markup, and enjoyable websites... I would choose option 2.

Answer 2

HTML
body {
font: normal medium/1.4 sans-serif;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 0.25rem;
text-align: left;
border: 1px solid #ccc;
}
tbody tr:nth-child(odd) {
background: #4D4D4D;
}
<div class="black">
<table class="test2">
<thead>
<tr>
<th>Text</th>
<th>Text2</th>
<th>Text3</th>
<th>Text4</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>