DataSet View Table Styling Issues

[Travis]

I cannot seem to set different column widths or create alternating row colors. I have tried several different CSS solutions to no avail.

Please see the attached image. The left is how it appears in DreamWeaver, on the right is how it appears in Xibo. The Red arrows are pointed to the CSS that does not appear to work.

1. I want the first column to be 70% of width (I also tried setting the width as pixels)
2. Have rows as alternating colors (as seen in Image on left)

I will put the HTML and CSS used below. Thank you!!

HTML used -----------------------------------------

	
<table class="DataSetTable">
  <tbody>
    <tr class="HeaderRow">
      <th scope="col" class="DataSetColumnHeaderCell">Business</th>
      <th scope="col" class="DataSetColumnHeaderCell">Location</th>
    </tr>
    <tr class="row_1 DataSetRow">
    	<td class="col_1 DataSetColumn">Text</td>
	<td class="col_2 DataSetColumn">Text</td>
    </tr>
    <tr class="row_2 DataSetRow">
    	<td class="col_1 DataSetColumn">Text</td>
	<td class="col_2 DataSetColumn">Text</td>
	</tr>	  
  </tbody>
</table>

CSS used -----------------------------------------

html {
	background-color:#0F5298;
}

table.DataSetTable {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;  
width:100%;
border-collapse:collapse;
table-layout:auto;
}

tr.HeaderRow {
font-size:2em;
text-align:left;
background-color:#0F5298;
border-bottom:3px solid #FFFFFF;
color:#ffffff;
}

tr, .row_1 {
background-color:#3C99DC;
}

tr, .row_2 {
background-color:#2565AE;
}

td, .col_1 {
width:70%;
padding-left:50px;

}

td, .col_2 {
width:30%;
padding-left:50px;

}

td.DataSetColumn {
}

tr.DataSetRow {
text-align:left;
color:#FFFFFF;
border:3px solid #0F5298;
line-height: 60px;
}

th.DataSetColumnHeaderCell {
border:0;
padding:20px 0 20px 50px;
}

[Travis]

[EDIT] I fixed the alternating colors, but still struggling with column widths.

CSS Below allows me to have alternating colors.

tbody tr:nth-child(even)
{
  background: #3C99DC;
}

tbody tr:nth-child(odd)
{
  background: #2565AE;
}

CSS below allows me to get the first column to take up about 1/3 of width. In Xibo preview it shows it as 1/4, which is a little strange that is is different. If I increase the “column-count” it breaks the layout.
I still need to get the final column much skinnier!

td, .col_1 {
column-count: 4;
padding-left:50px;
}

[sp_etz]

Not an answer; but I often do not bother with the DataSet View, in stead I use the DataSet Ticker. Much easier to get your own layouts and styling.
Ofcourse it could be that my lack of css skills is pushing me this way

[Travis]

Thanks, I appreciate the response, and I will keep that in mind. However, I am so close to having this work. Once i got a good template down it should be easy for me to style it any way I wish.