Как правильно оформить таблицу покупок

324

22 марта 2018, 07:38

Ребята! Учится не стыдно. Прошу помощи . Как сделать темным верхнюю строку,а все остальное светлым.

table { 
width:1090px; 
font-family: "Roboto", sans-serif; 
font-size: 3,36 пт; 
text-align: center; 
border-collapse: collapse; 
font-weight: 400;  
} 
 
th { 
background: #455a64; 
color:  white;  
padding: 20px 0 20px; 
} 
th, td { 
border-width: 0 1px 1px 0; 
 
} 
 
td { 
padding: 20px 0 20px; 
background: #ffffff; 
}

<body> 
	<div class="container"> 
	<table class="table"> 
  <thead class="thead-dark"> 
    <tr> 
      <th scope="col">#</th> 
      <th scope="col">Avatar</th> 
      <th scope="col">ID</th> 
      <th scope="col">Full Name</th> 
      <th scope="col">Purchase</th> 
      <th scope="col">Price</th> 
      <th scope="col">Downloads</th> 
    </tr> 
  </thead> 
  	<tbody class="table table-striped"> 
	    <tr> 
	      <th scope="row">1</th> 
	      <td></td> 
	      <td></td> 
	      <td></td> 
	      <td></td> 
	      <td></td> 
	      <td></td> 
 
	       
	    </tr> 
	    <tr> 
	    <th scope="row">2</th> 
	    	<td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
	       
	    </tr> 
	    <tr> 
	      <th scope="row">3</th>	        
	        <td></td> 
	        <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		     
	    </tr> 
	    <tr> 
	      <th scope="row">4</th> 
	       	<td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
	    </tr> 
	    <tr> 
	      <th scope="row">5</th> 
	     	<td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
 
	    </tr> 
	    <tr> 
	      <th scope="row">6</th> 
	       	<td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
	    </tr> 
	    <tr> 
	     <th scope="row">7</th> 
	      	<td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
		    <td></td> 
	  </tr> 
 	</tbody> 
 	<tfooter> 
 		<th scope="row">Total:><a href="basket"></a></Sales:></th> 
</table> 
	 
</body> 
</html>

Answer 1

table { 
    width: 1090px; 
    font-family: "Roboto", sans-serif; 
    font-size: 16px; 
    text-align: center; 
    border-collapse: collapse; 
    font-weight: 400; 
} 
 
th { 
    background: #455a64; 
    color: white; 
    padding: 20px 0 20px; 
} 
 
th, 
td { 
    border-width: 0 1px 1px 0; 
} 
 
td { 
    padding: 20px 0 20px; 
    background: #ffffff; 
}

<div class="container"> 
    <table class="table"> 
        <thead class="thead-dark"> 
            <tr> 
                <th scope="col">#</th> 
                <th scope="col">Avatar</th> 
                <th scope="col">ID</th> 
                <th scope="col">Full Name</th> 
                <th scope="col">Purchase</th> 
                <th scope="col">Price</th> 
                <th scope="col">Downloads</th> 
            </tr> 
        </thead> 
        <tbody class="table table-striped"> 
            <tr> 
                <td scope="row">1</td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
			</tr> 
            <tr> 
                <td scope="row">2</td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
 
            </tr> 
            <tr> 
                <td scope="row">3</td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
 
            </tr> 
            <tr> 
                <td scope="row">4</td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
            </tr> 
            <tr> 
                <td scope="row">5</td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
 
            </tr> 
            <tr> 
                <td scope="row">6</td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
            </tr> 
            <tr> 
                <td scope="row">7</td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
            </tr> 
        </tbody> 
        <tfoot> 
            <td scope="row">Total:<a href="basket"></a></td> 
        </tfoot> 
    </table> 
</div>

Answer 2

Задать для верхней строки класс и навесить стили на нее. или, если класс навесить нельзя, воспользуйтесь псевдоэлементом :first-child:

<style>
  tr:first-child {background-color:darkgrey;}
</style>
<table>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Создание сайта для агентства недвижимости в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Можно ли осуществить перенос по строкам внутри <nobr>

Есть длинная строка, которая должна переноситься по строкам, но ситуация такова, что она находится внутри тега <nobr>, убрать который не представляется...

179

CSS