Установить содержимое строки таблицы с помощью CSS?

Question

Могу ли я как-то превратить:

<!-- top blue line -->
<tr bgcolor="#000066">
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
</tr>

в нечто более похожее на:

<tr class="blueline"></tr>

, и CSS позаботится о вставке всех <td> s?

Если есть логичный и простой способ сделать это в ASP.NET/C#, где я храню форматирование в одном центральном месте, я был бы открыт для прослушивания, но я бы предпочел просто использовать CSS, если это вообще возможно.

РЕДАКТИРОВАТЬ:

Основываясь на ответах и ​​комментариях, я просто опубликую то, что у меня есть для вложенных таблиц, которые мне нравятся, и я предполагаю, что если лучше использовать, просто сделайте это полностьюпо-другому, это нормально;и что касается использования веб-элемента управления, который может быть лучшей идеей, но я не уверен, как использовать веб-элемент управления, а затем фактически иметь возможность помещать различное содержимое в разделы веб-элемента управления, как если бы это была статическая HTML-таблица.Мне нужно иметь возможность редактировать средний раздел для имен столбцов, текстовых полей и типов данных.

Код:

<table width="362" border="0" cellspacing="0" cellpadding="0">

<!-- top blue line -->
  <tr bgcolor="#000066">
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
  </tr>

<!-- top white space -->
  <tr> 
    <td width="120" valign="top" height="10"></td>
    <td width="1" height="10"></td>
    <td width="120" valign="top" height="10"></td>
    <td width="1" height="10"></td>
    <td width="120" valign="top" height="10"></td>
  </tr>

<!-- middle row / content -->
  <tr> 

  <!-- Labels for columns go inside this td -->
    <td width="120" valign="top"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="5">
        <tr valign="top"> 
          <td> 
            <p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000063">
                ColumnNames
            </font></font></b></font></p>

            <!-- put labels in here -->
            <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
                cell_id<br />
                cell_description<br />
                cell_name
            </font></font></p>                      
          </td>
        </tr>
      </table>                                
    </td>

    <td width="1" bgcolor="#FFCF63" height="1"></td>

  <!-- textboxes go inside this td -->
    <td width="120" valign="top"> 

      <table width="100%" border="0" cellspacing="0" cellpadding="5">
        <tr valign="top"> 
          <td> 
            <p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000063">
                Textboxes
            </font></b></font></p>
            <!-- put textboxes in here -->
            <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif">
                <asp:TextBox ID="TextBox6" runat="server" Width="100px"></asp:TextBox><br />
                <asp:TextBox ID="TextBox7" runat="server" Width="100px"></asp:TextBox><br />
                <asp:TextBox ID="TextBox8" runat="server" Width="100px"></asp:TextBox>
            </font></p>
          </td>
        </tr>
      </table>
    </td>

    <td width="1" bgcolor="#FFCF63" height="1"></td>

  <!-- datatypes for columns go inside this td -->
    <td width="120" valign="top"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="5">
        <tr valign="top"> 
          <td> 
            <p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000063">
                Data Types
            </font></font></b></font></p>

            <!-- put datatype descriptions [varchar(50),int,etc] in here -->
            <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
                INT<br />
                VARCHAR(50)<br />
                VARCHAR(10)
            </font></font></p>
          </td>
        </tr>

      </table>
    </td>

  </tr>

<!-- bottom white space -->
  <tr> 
    <td height="10"></td>
    <td height="10" width="1"></td>
    <td height="10"></td>
    <td height="10" width="1"></td>
    <td height="10"></td>
  </tr>

<!-- bottom blue line -->
  <tr bgcolor="#000066"> 
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
  </tr>

</table>

Answer 1

CSS Не могу сделать то, что вы описали.

Однако, если вы реорганизуете свою разметку для правильного использования таблиц, то, что вы хотите, довольно просто.Вложенные таблицы очень редко гарантируются.

/*Set Basic font styles for table*/

#data {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  /*Provides the border and spacing*/
  padding: 20px 0;
  border-top: 1px solid #006;
  border-bottom: 1px solid #006;
}


/*Give the table headers a bit of color*/

#data th {
  color: #000063;
  text-align: left;
  font-size: 13px;
}


/*set the width of our cells*/

#data th,
#data td {
  width: 120px;
}


/*Add some right padding to the first colum*/

#data tr>th:first-of-type,
#data tr>td:first-of-type {
  width: 114px;
  padding-right: 6px;
}


/*Add some left padding to th last colum*/

#data tr>th:last-of-type,
#data tr>td:last-of-type {
  width: 114px;
  padding-left: 6px;
}


/*Set the input width*/

#data input[type="text"] {
  width: 100px;
}

<table border="0" cellspacing="0" cellpadding="0" id="data">
  <thead>
    <tr>
      <th>Column Names</th>
      <th>Textboxes</th>
      <th>Data Types</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell_id</td>
      <!-- Replace input tags with your asp:textbox control -->
      <td><input type="text" /></td>
      <td>INT</td>
    </tr>
    <tr>
      <td>cell_description</td>
      <td><input type="text" /></td>
      <td>VARCHAR(50)</td>
    </tr>
    <tr>
      <td>cell_description</td>
      <td><input type="text" /></td>
      <td>VARCHAR(10)</td>
    </tr>
  </tbody>
</table>

Answer 2

Для этого конкретного примера это звучит как верхняя граница либо таблицы, либо первой строки без заголовка. Предполагая, что таблица выглядит примерно так:

<table>
    <thead>
        <tr>
            <th>Some Column</th>
            <th>Some Other Column</th>
        </tr>
    </thead>
    <tbody>
        <!-- rows go here -->
    </tbody>
</table>

, вы можете просто использовать быстрый:

tbody tr:first-of-type {
    border-top: 1px solid blue;
}

Answer 3

CSS будет применяться к каждой странице, которая ссылается на файл css, если только он специально не переопределен на этой странице. Вы бы переместили все ваши стили в файл css и в основном имели бы как можно меньше в макете таблицы. Помните, что таблицы лучше всего использовать для табличных данных, таких как отчеты. Если вы используете вложенные таблицы для управления позиционированием, этого можно добиться с помощью тегов css и div.

Answer 4

CSS не может добавлять td в tr, поэтому вы не сможете использовать этот подход. Вы можете использовать jquery / javascript для реализации этого, но если вы можете использовать asp / c #, есть что-то, называемое пользовательским веб-элементом управления, который может содержать html, и вам просто нужно поместить одну строку кода на вашу фактическую страницу, чтобы добавить в таблицу.

Answer 5

Я бы предложил написать для этого одну функцию javascript, и эту функцию можно вызывать на любой странице, которую вы пожелаете.Это уменьшит необходимость писать избыточный код везде и упростит обновления.