在 Bootstrap 3 中将表列移向表中心，但不居中对齐

Question

I have two side-by-side tables using Bootstrap 3. The only issue is I'd like the columns to be "moved in" toward the center of the table, with equal spacing on the left and right ends (but I don't want the text aligned center).

I can do this by wrapping the table cells in a <div> and giving them some padding. But I wasn't sure if there was a more responsive way to achieve this.

Edit : Just to clarify, I know I can use text-align: center to center align the columns and this will move the content toward the center. But I don't really want the text centered. I just want the contents moved inward.

Below is an example. Table 1 is before I add any padding. Table 2 is with padding added to the first <div> . The way Table 2 looks is closer to what I'd like, with the first column moved toward the center. But ideally I'd like equal whitespace at the left and right of both columns. Is there any way to achieve this without abusing the CSS or breaking Bootstrap's responsiveness?

 td>div { padding-left: 35px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-6"> <table class="table table-striped table-condensed table-borderless"> <thead> <tr> <th>Table 1</th> </tr> </thead> <tbody> <tr> <td> Some Field Name </td> <td>428 mg/L</td> </tr> <tr> <td> Some Field Name </td> <td>428 mg/L</td> </tr> <tr> <td> Some Field Name </td> <td>428 mg/L</td> </tr> </tbody> </table> </div> <div class="col-sm-6"> <table class="table table-striped table-condensed"> <thead> <tr> <th>Table 2</th> </tr> </thead> <tbody> <tr> <td> <div> Some Field Name</div> </td> <td> <div> 428 mg/L</div> </td> </tr> <tr> <td> <div> Some Field Name</div> </td> <td> <div> 428 mg/L</div> </td> </tr> <tr> <td> <div> Some Field Name</div> </td> <td> <div> 428 mg/L</div> </td> </tr> </tbody> </table> </div> </div> </div>

Answer 1

using text-align:center;

 table, thead, tr, tbody, th, td { text-align: center; }.table td { text-align: center; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-6"> <table class="table table-striped table-condensed table-borderless"> <thead> <tr> <th>Table 1</th> </tr> </thead> <tbody> <tr> <td> Some Field Name </td> <td>428 mg/L</td> </tr> <tr> <td> Some Field Name </td> <td>428 mg/L</td> </tr> <tr> <td> Some Field Name </td> <td>428 mg/L</td> </tr> </tbody> </table> </div> <div class="col-sm-6"> <table class="table table-striped table-condensed"> <thead> <tr> <th>Table 2</th> </tr> </thead> <tbody> <tr> <td> <div> Some Field Name</div> </td> <td> <div> 428 mg/L</div> </td> </tr> <tr> <td> <div> Some Field Name</div> </td> <td> <div> 428 mg/L</div> </td> </tr> <tr> <td> <div> Some Field Name</div> </td> <td> <div> 428 mg/L</div> </td> </tr> </tbody> </table> </div> </div> </div>

Answer 2

If you are using table

{
    text-align: center; 
    vertical-align: middle;
}

is best to make the content center.

But I really recommend you use Flex to build tables, it gives you a lot of options on styling and placement.

Example of table on flex:

    <div class="screening-table">
        <div class="flex table-heading">
            <div class="min-width table-heading__cell heading__cell--1">Sample</div>
            <div class="min-width table-heading__cell heading__cell--2">Target</div>
            <div class="min-width table-heading__cell heading__cell--3">Target Form</div>
            <div class="min-width table-heading__cell heading__cell--4">Target Amt.</div>
            <div class="min-width table-heading__cell heading__cell--5">Supplement</div>
            <div class="min-width table-heading__cell heading__cell--6">Purpose</div>
            <div class="min-width table-heading__cell heading__cell--7">Expected Tracer Behavior/Explanation
            </div>
        </div>

        <div class="table-all-body">
            <div class="flex table-body">
                <div class="flex min-width table-body__cell heading__cell--1">
                    <div class="more-icon">
                        <img src="images/screening/ic_more_vert_24px.png" alt="view more">
                    </div>
                    1
                </div>
                <div class="min-width table-body__cell heading__cell--2">NTRK4</div>
                <div class="flex min-width table-body__cell heading__cell--3">
                    <div class="info-icon">
                        <img src="images/screening/ic_info_24px.png" alt="info">
                    </div>
                    <span>Avi-NTRK4(1-796) DP</span>
                </div>
                <div class="min-width table-body__cell heading__cell--4">250 pmol</div>
                <div class="flex min-width table-body__cell heading__cell--5">
                    <div class="info-icon">
                        <img src="images/screening/ic_info_24px.png" alt="info"></div>
                    <span>None</span>
                </div>
                <div class="min-width table-body__cell heading__cell--6">
                    Identify small molecules that bind the non-phosphorylated full-length target
                </div>
                <div class="min-width table-body__cell heading__cell--7">Unclear whether this tracer binds
                    the
                    non-phosphorylated and phosphorylated NTRK4 with similar affinities
                </div>
            </div>
            <div class="rectangle"></div>

CSS:

.screening-table {
    margin-top: 72px;
    // margin-left: 26px;
    // margin-top: 56px;
    margin-left: 246px;

    .min-width {
        min-width: 42px;
    }

    .table-heading {
        flex-direction: row;
    }

    .table-heading {
        background: $catsill-white;
        box-shadow: 0px -1px 0px $catsill-white, 0px 1px 0px $catsill-white;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .table-heading__cell {
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 14px;
        margin-left: 14px;
        margin-right: 14px;
        color: $gull-gray;
    }

    .table-body {
        background: $primary-color;
        box-shadow: 0px 2px 6px rgba($text-color--black, 0.102874);
        border-radius: 3px;
    }

    .table-body__cell {
        margin-left: 14px;
        margin-right: 14px;
        padding-top: 20px;
        padding-bottom: 10px;

        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 19px;

        color: $plantation;

    }

    .info-icon {
        width: 24px;
        height: 24px;
    }

    .more-icon {
        margin-left: 8px;
    }

    .rectangle {
        border: 1px solid $catsill-white;
    }




}