Question

我想保持与100％图片相同的大小，但我想保持60px而不缩小表格。我尝试将60px添加到图像，但是可以工作，但是它使表格比以前小，但是我只想制作较小的图像，而不是表格。我正在使用带有数据表和自定义css的twitter boostrap，但是如何修复这部分ui组件？

<div id="history_payments" class="hidden account-tab">
<style>
    table.dataTable thead th {
  border-bottom: 0;
}
table.dataTable tfoot th {
  border-top: 0;
}

.card {
    border: none;
    -webkit-box-shadow: 1px 0 20px rgba(96,93,175,.05);
    box-shadow: 1px 0 20px rgba(96,93,175,.05);
    margin-bottom: 30px;
}
.table th {
    font-weight: 500;
    color: #827fc0;
}
.table thead {
    background-color: #f3f2f7;
}
.table>tbody>tr>td, .table>tfoot>tr>td, .table>thead>tr>td {
    padding: 14px 12px;
    vertical-align: middle;
}
.table tr td {
    color: #8887a9;
}
.thumb-sm {
    height: 32px;
    width: 32px;
}
.badge-soft-warning {
    background-color: rgba(248,201,85,.2);
    color: #f8c955;
}

.badge {
    font-weight: 500;
}
.badge-soft-primary {
    background-color: rgba(96,93,175,.2);
    color: #605daf;
}

.avatar {
  width: 60px;
  margin-right: 100px;
  border: 0;
}

</style>

<table id="example">
        <thead>
            <tr>
                <th>Project Name</th>
                <th>Payment Type</th>
                <th>Paid Date</th>
                <th>Amount</th>
                <th>Transaction</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Stripe_Logo%2C_revised_2016.svg/1200px-Stripe_Logo%2C_revised_2016.svg.png" alt="Avatar" class="avatar img-thumbnail"></td>
                <td>18-05-2014</td>
                <td>$320,800</td>
                <td><span class="badge badge-boxed badge-soft-warning">panding</span></td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/1920px-PayPal.svg.png" alt="Avatar" class="avatar img-thumbnail"></td>
                <td>18-05-2014</td>
                <td>$170,750</td>
                <td><span class="badge badge-boxed badge-soft-primary">Success</span></td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Citibank.svg/1920px-Citibank.svg.png" alt="Avatar" class="avatar img-thumbnail"></td>
                <td>20-09-2014</td>
                <td>$170,750</td>
                <td><span class="badge badge-boxed badge-soft-primary">Success</span></td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Walmart_logo.svg/1920px-Walmart_logo.svg.png" alt="Avatar" class="avatar img-thumbnail"></td>
                <td>05-10-2014</td>
                <td>$170,750</td>
                <td><span class="badge badge-boxed badge-soft-primary">Success</span></td>
            </tr>
        </tbody>
    </table>

如何在Datable中保持相同大小的表？

0 个答案: