Верстка элемента в таблице

269

15 декабря 2016, 16:30

На изображении имеется голубая полоска с текстом Просмотров/Предложений 24/14 .... Данная полоска находится в каждой строке таблицы и должна по длине равняться расстоянию между правой границей первой ячейки и левой границей последней. Текст в столбце Наименование может иметь различную ширину.

Как ее можно сверстать?

Адаптивность не нужна. Таблица фиксированная 1000px.

Answer 1

Приблизительно так

table{ 
    width: 100%; 
    border-collapse: collapse;  
	border-spacing: 0; 
} 
table thead tr th{ 
    background: #F7DF89; 
    border-bottom: 1px solid #C56636; 
} 
table tr th, 
table tr td{ 
    border: 1px solid #E7E7E7; 
    padding: 10px; 
} 
.td-blue{ 
    background: #DFEEF5; 
    text-align: center; 
}

<table> 
    <thead> 
         <tr> 
            <th>th</th> 
            <th>th</th> 
            <th>th</th> 
            <th>th</th> 
            <th>th</th> 
            <th>th</th> 
            <th>th</th>  
        </tr>      
    </thead> 
    <tbody> 
        <tr> 
            <td rowspan="2">td</td> 
            <td>td</td> 
            <td>td</td> 
            <td>td</td> 
            <td>td</td> 
            <td>td</td> 
            <td rowspan="2">td</td> 
       </tr> 
        <tr>             
            <td class="td-blue" colspan="5">td</td>                        
       </tr> 
    </tbody>     
</table>