Question

我到处寻找解决方案，但无法解决这个问题。我想控制表格中td元素的边框底部长度。我放了两个截图。有帮助吗？谢谢！

这是目前的结果： current result

这应该是这样的：

expected result

编辑：这是代码（它的woocommerce订单页面）

<tr class="order">
    <td class="order-number" data-title="<?php _e( 'Order Number', 'woocommerce' ); ?>">
        <a href="<?php echo esc_url( $order->get_view_order_url() ); ?>">
            #<?php echo $order->get_order_number(); ?>
        </a>
    </td>
    <td class="order-date" data-title="<?php _e( 'Date', 'woocommerce' ); ?>">
        <time datetime="<?php echo date( 'Y-m-d', strtotime( $order->order_date ) ); ?>" title="<?php echo esc_attr( strtotime( $order->order_date ) ); ?>"><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></time>
    </td>
    <td class="order-status" data-title="<?php _e( 'Status', 'woocommerce' ); ?>" style="text-align:left; white-space:nowrap;">
        <span><?php echo wc_get_order_status_name( $order->get_status() ); ?></span>
    </td>
    <td class="order-total" data-title="<?php _e( 'Total', 'woocommerce' ); ?>">
        <span><?php echo sprintf( _n( '%s for %s item', '%s for %s items', $item_count, 'woocommerce' ), $order->get_formatted_order_total(), $item_count ); ?></span>
    </td>
    <td class="order-actions">
        <?php
            $actions = array();

            if ( in_array( $order->get_status(), apply_filters( 'woocommerce_valid_order_statuses_for_payment', array( 'pending', 'failed' ), $order ) ) ) {
                $actions['pay'] = array(
                    'url'  => $order->get_checkout_payment_url(),
                    'name' => __( 'Pay', 'woocommerce' )
                );
            }

            if ( in_array( $order->get_status(), apply_filters( 'woocommerce_valid_order_statuses_for_cancel', array( 'pending', 'failed' ), $order ) ) ) {
                $actions['cancel'] = array(
                    'url'  => $order->get_cancel_order_url( wc_get_page_permalink( 'myaccount' ) ),
                    'name' => __( 'Cancel', 'woocommerce' )
                );
            }

            $actions['view'] = array(
                'url'  => $order->get_view_order_url(),
                'name' => __( 'View', 'woocommerce' )
            );

            $actions = apply_filters( 'woocommerce_my_account_my_orders_actions', $actions, $order );
            if ( $actions ) {
                foreach ( $actions as $key => $action ) {
                    echo '<a href="' . esc_url( $action['url'] ) . '" class="button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';
                }
            }
        ?>
    </td>                           
</tr>

Answer 1

为＆＃34; td＆＃34;添加边框。点缀。

  border-bottom:1px dotted #000;

Answer 2

请添加以下代码。

border-collapse: separate;
border-bottom:1px dotted color;

Answer 3

您无法控制任何元素的border length ...
相反，您可以控制元素本身的width，然后应用属性border-bottom。

现在，如果您需要该元素没有完整的可用宽度...您可以在宽度margin旁边使用display（因为我们正在讨论表格）

实施例

td {
    margin: 10px;                    <-- to separete the cell from the border
    display: inline-block;           <-- replace the default "table-cell"
    border-bottom: 1px dotted #999;  <-- the dotted border
}

参见示例：http://jsfiddle.net/gmolop/jn846ypv/

表td＆＃39; s中的边界底部长度

3 个答案: