HTML 中的嵌套 colspan

Question

我正在尝试让一个简单的 table.I 能够执行第一个 callsapn。但第二个不起作用。 table在下图中。

下面是我试过的 html 代码：

<table class="table table-bordered" width="100%" border="1" cellpadding="3" cellspacing="0">

    <thead>
        <tr class="bg-dark text-white" align="center">
            <th rowspan="2" class="text-center">{{ __('Major Technology Adopted') }}</th>
            <th colspan="10" class="text-center">{{ __('No Of Farmers Adopted Technology:Since Inception To Date') }}</th>


        </tr>
        <tr class="bg-dark text-white" align="center">
            <th colspan="4" class="text-center">{{ __('CIG') }}</th>
            <th colspan="4">{{ __('Non-CIG') }}</th>
        </tr>
        <tr>
            <th class="text-center">{{ __('Total Farmer') }}</th>
            <th class="text-center">{{ __('Female Farmers') }}</th>
            <th class="text-center">{{ __('Total Ethnic') }}</th>
            <th class="text-center">{{ __('Female Ethnic') }}</th>
            <th class="text-center">{{ __('Total Farmer') }}</th>
            <th class="text-center">{{ __('Female Farmers') }}</th>
            <th class="text-center">{{ __('Total Ethnic') }}</th>
            <th class="text-center">{{ __('Female Ethnic') }}</th>
        </tr>

    </thead>

</table>

我怎样才能做到这一点？

Answer 1

<table class="table table-bordered" width="100%" border="1" cellpadding="3" cellspacing="0">

    <thead>
        <tr class="bg-dark text-white" align="center">
            <th rowspan="2" class="text-center">{{ __('Major Technology Adopted') }}</th>
            <th colspan="10" class="text-center">{{ __('No Of Farmers Adopted Technology:Since Inception To Date') }}</th>


        </tr>
        <tr class="bg-dark text-white" align="center">
            <th colspan="4" class="text-center">{{ __('CIG') }}</th>
            <th colspan="4">{{ __('Non-CIG') }}</th>
        </tr>
        <tr>
<th></th>
            <th class="text-center">{{ __('Total Farmer') }}</th>
            <th class="text-center">{{ __('Female Farmers') }}</th>
            <th class="text-center">{{ __('Total Ethnic') }}</th>
            <th class="text-center">{{ __('Female Ethnic') }}</th>
            <th class="text-center">{{ __('Total Farmer') }}</th>
            <th class="text-center">{{ __('Female Farmers') }}</th>
            <th class="text-center">{{ __('Total Ethnic') }}</th>
            <th class="text-center">{{ __('Female Ethnic') }}</th>
        </tr>

    </thead>

</table>

Answer 2

我想这就是你想要的：

<table class="table table-bordered" width="100%" border="1" cellpadding="3" cellspacing="0">

    <thead>
        <tr class="bg-dark text-white" align="center">
            <th rowspan="3" class="text-center">{{ __('Major Technology Adopted') }}</th>
            <th colspan="10" class="text-center">{{ __('No Of Farmers Adopted Technology:Since Inception To Date') }}</th>


        </tr>
        <tr class="bg-dark text-white" align="center">
            <th colspan="4" class="text-center">{{ __('CIG') }}</th>
            <th colspan="4">{{ __('Non-CIG') }}</th>
        </tr>
        <tr>
            <th class="text-center">{{ __('Total Farmer') }}</th>
            <th class="text-center">{{ __('Female Farmers') }}</th>
            <th class="text-center">{{ __('Total Ethnic') }}</th>
            <th class="text-center">{{ __('Female Ethnic') }}</th>
            <th class="text-center">{{ __('Total Farmer') }}</th>
            <th class="text-center">{{ __('Female Farmers') }}</th>
            <th class="text-center">{{ __('Total Ethnic') }}</th>
            <th class="text-center">{{ __('Female Ethnic') }}</th>
        </tr>

    </thead>

</table>

您应该在 Major Technology Adopted

中将行跨度 2 更改为 3

Answer 3

这将对您有所帮助

<thead>
    <tr class="bg-dark text-white" align="center">
        <th rowspan="3" class="text-center">{{ __('Major Technology Adopted') }}</th>
        <th colspan="10" class="text-center">{{ __('No Of Farmers Adopted Technology:Since Inception To Date') }}</th>


    </tr>
    <tr class="bg-dark text-white" align="center">
        <th colspan="4" class="text-center">{{ __('CIG') }}</th>
        <th colspan="4">{{ __('Non-CIG') }}</th>
    </tr>
    <tr>
        <th class="text-center">{{ __('Total Farmer') }}</th>
        <th class="text-center">{{ __('Female Farmers') }}</th>
        <th class="text-center">{{ __('Total Ethnic') }}</th>
        <th class="text-center">{{ __('Female Ethnic') }}</th>
        <th class="text-center">{{ __('Total Farmer') }}</th>
        <th class="text-center">{{ __('Female Farmers') }}</th>
        <th class="text-center">{{ __('Total Ethnic') }}</th>
        <th class="text-center">{{ __('Female Ethnic') }}</th>
    </tr>

</thead>

</table>

HTML 中的嵌套 colspan

Nested colspan in HTML

html

html-table