Question

假设我有以下表格：

<table border="2">
<tr>
            <td>abcsss</td>
            <td>sdf</td>
            <td>def</td>
            <td>def</td>
            <td rowspan="1,5">defsssss</td>
</tr>
        <tr>
            <td>abcsss</td>
            <td>sdf</td>
            <td>def</td>
            <td>def</td>
</tr>
    <tr>
            <td>abcsss</td>
            <td>sdf</td>
            <td>def</td>
            <td>def</td>
            <td rowspan="1,5">defsssss</td>
</tr>
</table>

我知道代码rowspan =＆＃34; 1,5＆＃34;没有工作，但我怎么能让它运作？是否有一些css或html技巧可以使字段像rowspan =＆＃34; 1,5＆＃34;工作

Answer 1

<tr>
            <td rowspan="2">abcsss</td>
            <td rowspan="2">sdf</td>
            <td rowspan="2">def</td>
            <td rowspan="2">def</td>
            <td rowspan="3">defsssss</td>
</tr>

＆＃13;

<table border="2">
  <tr>
    <td rowspan="2">abcsss</td>
    <td rowspan="2">sdf</td>
    <td rowspan="2">def</td>
    <td rowspan="2">def</td>
    <td rowspan="3">defsssss</td>
  </tr>
  <tr></tr>
  <tr>
    <td rowspan="2">abcsss</td>
    <td rowspan="2">sdf</td>
    <td rowspan="2">def</td>
    <td rowspan="2">def</td>
  </tr>
  <tr>
    <td rowspan="3">defsssss</td>
  </tr>

  <tr>
    <td rowspan="2">abcsss</td>
    <td rowspan="2">sdf</td>
    <td rowspan="2">def</td>
    <td rowspan="2">def</td>

  </tr>
</table>

＆＃13;

Answer 2

经过5年的思考，这个问题终于找到了解决方案：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layout Tabla</title>
    <style>
        /*Estilo probado para IE edge, Chrome, FF y Safari*/
        table {
            width: 500px;
        }

        th,
        td {
            border: 2px solid black;
            height: 24px !important;
            text-align: center;
        }

        /*Reseteo de padding, margin y border para celda rowspan = 3*/
        td#celdarowspan3 {
            border: none;
            padding: 0px;
            margin: 0px;
        }

        /*Capa contenedora para celda rowspan = 3*/
        div#contenedora-celdarowspan3 {
            height: 100%;
            width: 100%;
            border: none;
            padding: 0px;
            margin: 0px;
        }

        /*1a subfila de celda rowspan = 3*/
        /*Utilizamos propiedad display: flex para alineación de texto centrado con justificación también centrado*/
        /*Añadimos margin-bottom: 2px para establecer separación entre las 2 subfilas*/
        div#subfila1 {
            border: 2px solid black;
            margin-bottom: 2px;
            height: 43%;
            /*display: flex; align-items: center; justify-content: center;*/
            text-align: center;
        }

        /*2a subfila de celda rowspan = 3*/
        /*Utilizamos propiedad display: flex para alineación de texto centrado con justificación también centrado*/
        div#subfila2 {
            border: 2px solid black;
            height: 44%;
            /*display: flex; align-items: center; justify-content: center;*/
            text-align: center;
        }

        /*Media query de css3 para que los estilos sólo se apliquen a Mozilla*/
        /*Puede comentarse puesto que estas propiedades par IE y Chrome no afectan*/
        /*y sólo son necesarias para Mozilla Firefox*/
        /*Permiten que en FF la capa contenedora-celdarowspan3 ocupe todo el alto/ancho*/
        /* de la celda rowspan = 3*/
        /*@-moz-document url-prefix() {*/
        td#celdarowspan3 {
            overflow: hidden;
            position: relative;
        }

        div#contenedora-celdarowspan3 {
            height: 100%;
            width: 100%;
            position: absolute;
            right: 0;
            top: 0;
        }

        /* }*/
    </style>
    <script src="chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/prompt.js"></script>
</head>

<body>
    <table>
        <caption>Layout Tabla</caption>
        <thead>
            <tr>
                <th rowspan="3">Día</th>
                <th colspan="3">Seminario</th>
            </tr>
            <tr>
                <th colspan="2">Horario</th>
                <th rowspan="2">Tema</th>
            </tr>
            <tr>
                <th>Inicio</th>
                <th>Fin</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">Lunes</td>
                <td rowspan="2">8:00</td>
                <td rowspan="2">17:00</td>
                <td>Introducción a XML</td>
            </tr>
            <tr>
                <td>Validación: DTD y Relax NG</td>
            </tr>

            <tr>
                <td rowspan="3">Martes</td>
                <td>8:00</td>
                <td>11:00</td>
                <td id="celdarowspan3" rowspan="3">
                    <div id="contenedora-celdarowspan3">
                        <div id="subfila1">XPATH</div>
                        <div id="subfila2">Transformaciones XSL</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>11:00</td>
                <td>14:00</td>
            </tr>
            <tr>
                <td>14:00</td>
                <td>17:00</td>
            </tr>


            <tr>
                <td>Miércoles</td>
                <td>8:00</td>
                <td>12:00</td>
                <td>Formateo de objetos XSL</td>
            </tr>
        </tbody>

    </table>


</body>

</html>

Answer 3

问题是你把1,5作为一个值。 Html只接受整数值

HTML rowspan 1,5（一个半）

3 个答案: