CODEWITHSUNDEEP
cssformscss-selectorscss-tables
Dave_K
Dave_K

Reputation: 59

Table Rows wrapped in a Form are read as all even or all odd in css. Any idea why?

Here is an odd one. I have table rows wrapped in a form to make the row clickable and send back data through post to the parent page. Here is a sample of my html, which is generated in a php function with data from a mysql database:

    table.iframetbl {
    	width: 90%;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    	vertical-align: middle;
    	border: 2px solid #000000;
    	border-collapse:collapse;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    	font-size: 8pt;
    }
    table.iframetbl th {
    	background-color: #538073;
    	color: #F0F0F0;
    }
    table.iframetbl td {
    	white-space:break-word;
    	max-width:230px;
    	font-size:8pt;
    }
    table.iframetbl tr:nth-child(odd) {
    	background-color: #FFFFFF;
    }
    table.iframetbl tr:nth-child(even) {
    	background-color: #E5E5E5;
    }
    table.iframetbl tr.reg {
    	background-color: #F9F180;
    }
<table class="iframetbl" >
      <tr>
        <th>Order #</th>
        <th>Customer#</th>
        <th>Entry Date</th>
      </tr>
      <form id="15002588-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
    	<input type="hidden" name="whse" value="15" />
    	<input type="hidden" name="ordernum" value="15002588-000" />
    	<tr onClick="document.getElementById('15002588-000').submit()">
    		<td>15002588-000</td>
    		<td>150004</td>
    		<td>2016-09-28</td>
    	</tr></form>
      <form id="15002587-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
    	<input type="hidden" name="whse" value="15" />
    	<input type="hidden" name="ordernum" value="15002587-000" />
    	<tr onClick="document.getElementById('15002587-000').submit()">
    		<td>15002587-000</td>
    		<td>150058</td>
    		<td>2016-09-28</td>
    	</tr></form>
      <form id="15002585-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
    	<input type="hidden" name="whse" value="15" />
    	<input type="hidden" name="ordernum" value="15002585-000" />
    	<tr onClick="document.getElementById('15002585-000').submit()">
    		<td>15002585-000</td>
    		<td>150044</td>
    		<td>2016-09-28</td>
    	</tr></form>
      <form id="15002584-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
    	<input type="hidden" name="whse" value="15" />
    	<input type="hidden" name="ordernum" value="15002584-000" />
    	<tr onClick="document.getElementById('15002584-000').submit()">
    		<td>15002584-000</td>
    		<td>150019</td>
    		<td>2016-09-28</td>
    	</tr></form>
      <form id="15002583-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
    	<input type="hidden" name="whse" value="15" />
    	<input type="hidden" name="ordernum" value="15002583-000" />
    	<tr onClick="document.getElementById('15002583-000').submit()">
    		<td>15002583-000</td>
    		<td>150030</td>
    		<td>2016-09-28</td>
    	</tr></form>
      </table>

Everything works as far as functionality - I can click on my rows and it sends the data back to the parent page this table is generated from, etc. The problem is the css that changes the odd and even row background colors isn't working right. When I inspect the element, it shows each row as even (or odd depending on browser - IE and Chrome show them all as odd and in jsfiddle they are all even). If I remove the form from around the rows, the css reads the proper nth-child and the colors work. I've never run into this before, does anyone have a solution?

Here is the code in a fiddle

Upvotes: 0

Views: 214

Answers (1)

Gavin
Gavin

Reputation: 4515

For future visitors, the issue was wrapping the tr elements in a form. The form needs to be inside the tr instead.

Upvotes: 2

Related Questions