Как сгенерировать различное количество строк и столбцов в таблице - PullRequest
0 голосов
/ 23 апреля 2019

Я получил таблицу с тремя столбцами (имя, дата, секрет) и динамическими строками.Я хотел бы иметь два ряда головы.Первый и третий столбцы должны использовать первый и второй ряд заголовков как один ряд.Я знаю, что могу сделать это с rowspan = "2".Проблема сейчас в том, что мне нужен второй ряд заголовков, чтобы иметь четыре столбцаМне нужно, чтобы второй и третий столбцы во втором ряду были такими же большими, как столбец «date» в моем первом ряду.Поэтому я хочу разбить мою колонку «дата» на «начало» и «конец».Так что просто иметь время начала и окончания.Итак, мой первый ряд - Имя, дата, секрет.Мой второй ряд должен быть Имя, начало, конец, секретный, но такой же большой, как первый ряд.Дата должна быть просто разделена на начало и конец.

См. Мой код с раскрывающимся меню и флажком ниже.Я не включил вторую строку заголовка, потому что я не знаю, как.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
<html>
    <head><title>Shared Secrets</title></head>

<body>
    <h1>Shared Secrets</h1>
<table id="myTable">
        <colgroup>
            <col width="150" style="background-color:red"></col>
            <col width="165"></col>
        </colgroup>
        <tr  style ="background-color:grey">
            <th>plane
                <select id="modelRangeDropdown" onchange="filterReports()">
                     <option selected="selected">All</option>
                     <xsl:for-each select="logstore/plane">
                        <option>
                         <xsl:value-of select="Name" />
                        </option>
                     </xsl:for-each>                    
                </select>                   
            </th>   
            <th>Datum</th>
            <th>Secret
                <input type="checkbox" id="identicalSecrets" onchange="identicalSecrets()"></input>
                <label for="identicalSecrets">hide identical secrets</label>
            </th>
        </tr>
        <xsl:for-each select="logstore/plane/trigger">
            <tr>
                <td><xsl:value-of select="../Name"/></td>
                <td><xsl:value-of select="date"/></td>
                <td><xsl:value-of select="secret"/></td>
            </tr>
        </xsl:for-each>
    </table>    
    <script type="text/javascript" src="/../../filterReports.js"></script>  
    <script type="text/javascript" src=/../../identicalSecrets.js"></script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

1 Ответ

0 голосов
/ 23 апреля 2019

Атрибут числа строк HTML

Пример:

HTML-таблица с ячейкой таблицы, занимающей две строки:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Определение и использование Атрибут rowspan указывает количество строк, которое должна занимать ячейка.

Дополнительные примеры

Пример использования rowspan = "0":

<table>
<thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th rowspan="3">Savings for holiday!</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="0">$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</tbody>
</table>

https://www.w3schools.com/tags/att_td_rowspan.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...