'How do I make 19 Sub Cells and 3 Header Cells Table in Bootstrap 3.3.7?

I need to make 3 cells header and 19 cells sub header Bootstrap 3.3.7 table as I attached. Example screen shot attached. (Sorry for attaching screen shot I cannot draw here easily)

Thanks for your help.

Table Screenshot

htmlcsshtml-tabletwitter-bootstrap-3datatable


Solution 1:[1]

Something like this should get you started, you will need to add additional classes to further customize the look and feel.

<!DOCTYPE html>
<html>

<head>

    <title>Bootstrap 3.3.7 Table</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

</head>

<body>

    <div class="container">

        <div class="row">

            <table class="table table-bordered text-center align-middle">
                <thead>
                    <tr>
                        <th scope="col"></th>
                        <th scope="col" colspan="9" class="h3 text-uppercase text-center text-danger">Home</th>
                        <th scope="col" colspan="9" class="h3 text-uppercase text-center text-primary">Away</th>
                    </tr>
                    <tr>
                        <th scope="col">Names</th>
                        <th scope="col" class="text-center text-danger">H1</th>
                        <th scope="col" class="text-center text-danger">H2</th>
                        <th scope="col" class="text-center text-danger">H3</th>
                        <th scope="col" class="text-center text-danger">H4</th>
                        <th scope="col" class="text-center text-danger">H5</th>
                        <th scope="col" class="text-center text-danger">H6</th>
                        <th scope="col" class="text-center text-danger">H7</th>
                        <th scope="col" class="text-center text-danger">H8</th>
                        <th scope="col" class="text-center text-danger">H9</th>
                        <th scope="col" class="text-center text-primary">A2</th>
                        <th scope="col" class="text-center text-primary">A1</th>
                        <th scope="col" class="text-center text-primary">A3</th>
                        <th scope="col" class="text-center text-primary">A4</th>
                        <th scope="col" class="text-center text-primary">A5</th>
                        <th scope="col" class="text-center text-primary">A6</th>
                        <th scope="col" class="text-center text-primary">A7</th>
                        <th scope="col" class="text-center text-primary">A8</th>
                        <th scope="col" class="text-center text-primary">A9</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">Johnny Walker</th>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                    <tr>
                        <th scope="row">Andy Mcdowell</th>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                    <tr>
                        <th scope="row">Cristiano Ronaldo</th>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions