Question

这里有没有人知道如何制作这样的表格标题（参见下图）？

table header

我试过了：

<thead>
                    <tr>
                        <th>No.</th>
                        <th>Creation Date</th>
                        <th>Week Day</th> 
                        <th>Log Type</th>
                        <th colspan="5" rowspan="1" style="text-align: center">Time</th>
                        <th>action</th>
                    </tr>
                    <tr>
                      <th>IN/START</th>
                      <th>OUT/STOP</th>
                    </tr>
                </thead>

但遗憾的是，没有运气，桌头错过，任何帮助，建议，线索，建议，建议，想法？

Answer 1

在一列上应该是colspan="2"而在其他列上应该是rowspan="2"。使用此：

table, th {border: 1px solid #ccc; border-collapse: collapse; font-weight: normal; font-family: 'Segoe UI'; margin: 0; padding: 0;}
table {width: 100%;}
th {padding: 5px;}

<table>
  <thead>
    <tr>
      <th rowspan="2">No.</th>
      <th rowspan="2">Creation Date</th>
      <th rowspan="2">Week Day</th> 
      <th rowspan="2">Log Type</th>
      <th colspan="2" style="text-align: center">Time</th>
      <th rowspan="2">action</th>
    </tr>
    <tr>
      <th>IN/START</th>
      <th>OUT/STOP</th>
    </tr>
  </thead>
</table>

Answer 2

小心使用colspan=""和rowspan=""

尝试此

th{
border:solid 1px red;
  padding:5px;
}

<table border="0" cellpadding="0" cellspacing="0">
<thead>
                    <tr>
                        <th rowspan="2">No.</th>
                        <th rowspan="2">Creation Date</th>
                        <th rowspan="2">Week Day</th> 
                        <th rowspan="2">Log Type</th>
                        <th colspan="2" style="text-align: center">Time</th>
                        <th  rowspan="2">action</th>
                    </tr>
                    <tr>
                      <th>IN/START</th>
                      <th>OUT/STOP</th>
                    </tr>
                </thead>
</table>

Answer 3

您应该正确使用rowspan和colspan。 Tutorial

在这里我在这里写了一些HTML代码，希望它会有所帮助。

CellKML

Answer 4

尝试使用以下内容，这将是有帮助的

    $(document).ready(function () {
        $("#btnSend").click(function () {
            debugger;
            jQuery.support.cors = true;

            var doOaepPadding = true;
            var rsa = new System.Security.Cryptography.RSACryptoServiceProvider();
            _privateKey = rsa.ToXmlString(true);
            _publicKey = rsa.ToXmlString(false);
            var data = $("#txtName").val();
            var name = "testvalue";

            var _privateKey = rsa.ToXmlString(true);
            **var _publicKey = rsa.ToXmlString(false);**

            //<![CDATA[ and ]]>;
            $.ajax({

                type: "POST",

                url: 'http://localhost:51348/TestService.svc/SendCredentials',
               crossDomain: true,

                   data:JSON.stringify({ mac: "bac", pubKey: _publicKey }),

                contentType: "application/json",
                dataType: "json",

                success: function (result) {
                    var ans = JSON.stringify(result);

                    alert(ans);

                    //   result = new XMLSerializer().serializeToString(result.documentElement);

                },
                error: function (xhr, err) {
                    alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                    alert("responseText: " + xhr.responseText);
                }
            });
            return false;

        });

    });

</script>

Answer 5

无需使用colspan和rowspan使用这个简单的代码并根据您的需要添加您的CSS。

<table border="1">
    <tr>
        <th>No.</th>
        <th>Creation Date</th>
        <th>Week Day</th> 
        <th>Log Type</th>
        <th>
            <table border="1">
                <tr>
                    <p style="text-align: center !important;">Time</p>
                </tr>
                <tr>
                    <th>IN/START</th>
                    <th>OUT/STOP</th>
                </tr>
            </table>
        </th>
        <th>action</th>
    </tr>
 </table>

玩得开心。

带行数的标题

5 个答案: