Kho giao diện web đa dạngVới đủ các lĩnh vực - ngành nghề kinh doanh khác nhau

Kinh doanh hiệu quả hơn trên internet

MẪU WEBSITE THEO GIÁ

THIẾT KẾ TABLE ĐẸP MẮT BẰNG CSS (Tiếp)

Thay đổi dễ dàng theo phong cách của riêng của bạn

NULL

Mẫu web bán hàng, Mẫu web giới thiệu công ty, Mẫu web bất động sản, Mẫu web cá nhân ...

THIẾT KẾ TABLE ĐẸP MẮT BẰNG CSS (Tiếp)

Tác giả : Số lượt xem : 9435 lượt xem

Ở bài trước mình có hướng dẫn các bạn làm danh sách sản phẩm và thống kê số liệu của sản phẩm theo dạng bảng. Trong bài này mình sẽ hướng dẫn các bạn làm bảng order như ảnh dưới.

Link DEMO : Bấm Vào Đây

Ta có HTML sau:

<div class="wrapper">
	<table class="table table-bordered cart_summary">
        <thead>
            <tr>
                <th class="cart_product">Product</th>
                <th>Description</th>
                <th>Avail.</th>
                <th>Unit price</th>
                <th>Qty</th>
                <th>Total</th>
                <th class="action"><i class="fa fa-trash-o"></i>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="cart_product">
                    <a href="#"><img src="product-100x122.jpg" alt="Product">
                    </a>
                </td>
                <td class="cart_description">
                    <p class="product-name"><a href="#">Frederique Constant </a>
                    </p>
                    <small class="cart_ref">SKU : #123654999</small>
                    <br>
                    <small><a href="#">Color : Beige</a></small>
                    <br>
                    <small><a href="#">Size : S</a></small>
                </td>
                <td class="cart_avail"><span class="label label-success">In stock</span>
                </td>
                <td class="price"><span>61,19 €</span>
                </td>
                <td class="qty">
                    <input class="form-control input-sm" type="text" value="1">
                    <a href="#"><i class="fa fa-caret-up"></i></a>
                    <a href="#"><i class="fa fa-caret-down"></i></a>
                </td>
                <td class="price">
                    <span>61,19 €</span>
                </td>
                <td class="action">
                    <a href="#">Delete item</a>
                </td>
            </tr>
            <tr>
                <td class="cart_product">
                    <a href="#"><img src="product-100x122.jpg" alt="Product">
                    </a>
                </td>
                <td class="cart_description">
                    <p class="product-name"><a href="#">Frederique Constant </a>
                    </p>
                    <small class="cart_ref">SKU : #123654999</small>
                    <br>
                    <small><a href="#">Color : Beige</a></small>
                    <br>
                    <small><a href="#">Size : S</a></small>
                </td>
                <td class="cart_avail"><span class="label label-success">In stock</span>
                </td>
                <td class="price"><span>61,19 €</span>
                </td>
                <td class="qty">
                    <input class="form-control input-sm" type="text" value="1">
                    <a href="#"><i class="fa fa-caret-up"></i></a>
                    <a href="#"><i class="fa fa-caret-down"></i></a>
                </td>
                <td class="price">
                    <span>61,19 €</span>
                </td>
                <td class="action">
                    <a href="#">Delete item</a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" rowspan="2"></td>
                <td colspan="3">Total products (tax incl.)</td>
                <td colspan="2">122.38 €</td>
            </tr>
            <tr>
                <td colspan="3"><strong>Total</strong>
                </td>
                <td colspan="2"><strong>122.38 €</strong>
                </td>
            </tr>
        </tfoot>
    </table>	
    <div class="cart_navigation ">
        <a class="prev-btn" href="#">Continue shopping</a>
        <a class="next-btn" href="#">Proceed to checkout</a>
    </div>
</div>

<thead>

<tr>

<th class="cart_product">Product</th>

<th>Description</th>

<th>Avail.</th>

<th>Unit price</th>

<th>Total</th>

</th>

</tr>

</thead>

<tbody>

<tr>

</a>

</td>

<p class="product-name"><a href="#">Frederique Constant </a>

</p>

<br>

<small><a href="#">Color : Beige</a></small>

<br>

</td>

<td class="cart_avail"><span class="label label-success">In stock</span>

</td>

</td>

</td>

</td>

<a href="#">Delete item</a>

</td>

</tr>

<tr>

</a>

</td>

<p class="product-name"><a href="#">Frederique Constant </a>

</p>

<br>

<small><a href="#">Color : Beige</a></small>

<br>

</td>

<td class="cart_avail"><span class="label label-success">In stock</span>

</td>

</td>

</td>

</td>

<a href="#">Delete item</a>

</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="3">Total products (tax incl.)</td>

</tr>

<tr>

<td colspan="3"><strong>Total</strong>

</td>

</td>

</tr>

</tfoot>

</table>

<a class="prev-btn" href="#">Continue shopping</a>

<a class="next-btn" href="#">Proceed to checkout</a>

</div>

Và Css:

*{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}
table{
    padding: 0;
    border: none;
    border-collapse: collapse;
    border: 1px solid #ddd;
    width: 1170px;
    margin: 50px auto 10px;
}
table td {
    padding: 0;
    border: none;
    border-collapse: collapse;
}
a {
    color: #666;
    text-decoration: none;
}
.table tr>td, 
.table tr>th {
    border: 1px solid #ddd;
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-weight: normal;
}
.cart_avail {
    text-align: center;
}
img {
    vertical-align: top;
    max-width: 100%;
}
.cart_summary > thead, 
.cart_summary > tfoot {
    background: #f7f7f7;
    font-size: 16px;
}
.cart_summary td.cart_product {
    width: 120px;
    padding: 15px;
}
.page-order .cart_description {
    font-size: 14px;
}
.page-order .product-name {
    font-size: 16px;
}
.cart_summary td {
    vertical-align: middle!important;
    padding: 20px;
}
a {
    color: #666;
    text-decoration: none;
	outline: none !important;
}
.cart_avail .label {
    white-space: normal;
    display: inline-block;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 0px;
}
.cart_summary .price {
    text-align: right;
}
.cart_summary .qty {
    text-align: center;
    width: 100px;
}
.cart_summary .qty a:hover {
    background: #ff3366;
    color: #fff;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.cart_summary .qty input {
    text-align: center;
    max-width: 64px;
    margin: 0 auto;
    border-radius: 0px;
    border: 1px solid #eaeaea;
}
.cart_avail .label-success {
    background: #FFF;
    border: 1px solid #55c65e;
    color: #48b151;
    font-weight: normal;
}
.cart_summary .qty a {
    padding: 8px 10px 5px 10px;
    border: 1px solid #eaeaea;
    display: inline-block;
    width: auto;
    margin-top: 5px;
}
.cart_summary .action {
    text-align: center;
}
.cart_summary .action a {
    background: url(https://i.imgur.com/wBgtljO.png) no-repeat center center;
    font-size: 0;
    height: 9px;
    width: 9px;
    display: inline-block;
    line-height: 24px;
}
.cart_summary tfoot {
    text-align: right;
}
.cart_navigation {
    margin: 10px 10% 40px;
    float: left;
    width: 80%;
}
.cart_navigation a.prev-btn {
    float: left;
}
.cart_navigation a {
    padding: 10px 20px;
    border: 1px solid #eaeaea;
}
.cart_navigation a.prev-btn:before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f104";
    padding-right: 15px;
}
.cart_navigation a.next-btn {
    float: right;
    background: #ff3366;
    color: #fff;
    border: 1px solid #ff3366;
}
.cart_navigation a:hover {
    background: #ff3366;
    color: #fff;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-o-box-sizing: border-box;

}

table{

padding: 0;

border: none;

border-collapse: collapse;

border: 1px solid #ddd;

width: 1170px;

margin: 50px auto 10px;

}

table td {

padding: 0;

border: none;

border-collapse: collapse;

}

a {

color: #666;

text-decoration: none;

}

.table tr>td,

.table tr>th {

border: 1px solid #ddd;

padding: 8px;

line-height: 1.42857143;

vertical-align: top;

border-top: 1px solid #ddd;

font-weight: normal;

}

.cart_avail {

text-align: center;

}

img {

vertical-align: top;

max-width: 100%;

}

.cart_summary > thead,

.cart_summary > tfoot {

background: #f7f7f7;

font-size: 16px;

}

.cart_summary td.cart_product {

width: 120px;

padding: 15px;

}

.page-order .cart_description {

font-size: 14px;

}

.page-order .product-name {

font-size: 16px;

}

.cart_summary td {

vertical-align: middle!important;

padding: 20px;

}

a {

color: #666;

text-decoration: none;

outline: none !important;

}

.cart_avail .label {

white-space: normal;

display: inline-block;

padding: 6px 10px;

font-size: 14px;

border-radius: 0px;

}

.cart_summary .price {

text-align: right;

}

.cart_summary .qty {

text-align: center;

width: 100px;

}

.cart_summary .qty a:hover {

background: #ff3366;

color: #fff;

}

.form-control {

display: block;

width: 100%;

height: 34px;

padding: 6px 12px;

font-size: 14px;

line-height: 1.42857143;

color: #555;

background-color: #fff;

background-image: none;

border: 1px solid #ccc;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;

-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

}

.form-control:focus {

border-color: #66afe9;

outline: 0;

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);

box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);

}

.input-sm {

height: 30px;

padding: 5px 10px;

font-size: 12px;

line-height: 1.5;

border-radius: 3px;

}

.cart_summary .qty input {

text-align: center;

max-width: 64px;

margin: 0 auto;

border-radius: 0px;

border: 1px solid #eaeaea;

}

.cart_avail .label-success {

background: #FFF;

border: 1px solid #55c65e;

color: #48b151;

font-weight: normal;

}

.cart_summary .qty a {

padding: 8px 10px 5px 10px;

border: 1px solid #eaeaea;

display: inline-block;

width: auto;

margin-top: 5px;

}

.cart_summary .action {

text-align: center;

}

.cart_summary .action a {

background: url(https://i.imgur.com/wBgtljO.png) no-repeat center center;

font-size: 0;

height: 9px;

width: 9px;

display: inline-block;

line-height: 24px;

}

.cart_summary tfoot {

text-align: right;

}

.cart_navigation {

margin: 10px 10% 40px;

float: left;

width: 80%;

}

.cart_navigation a.prev-btn {

float: left;

}

.cart_navigation a {

padding: 10px 20px;

border: 1px solid #eaeaea;

}

.cart_navigation a.prev-btn:before {

font: normal normal normal 14px/1 FontAwesome;

content: "\f104";

padding-right: 15px;

}

.cart_navigation a.next-btn {

float: right;

background: #ff3366;

color: #fff;

border: 1px solid #ff3366;

}

.cart_navigation a:hover {

background: #ff3366;

color: #fff;

}

Từ HTML và CSS ở trên bạn gộp vào sẽ có bảng như trang ảnh.

Hy vọng các bạn sẽ thấy thích bài viết của mình chia sẻ cho các bạn, nếu có bất kỳ vấn đề khó khăn gì hay câu hỏi gì . Bạn đừng ngần ngại , hãy để lại bình luận ở dưới nhé.

Chúc Các Bạn Thành Công !

Hỗ trợ trực tuyến

Hỗ trợ khách hàng
0941 254 937 Gia Khang
Email chăm sóc khách hàng
support@thietkewebsite500k.net

Kho giao diện web đa dạngVới đủ các lĩnh vực - ngành nghề kinh doanh khác nhau

THIẾT KẾ TABLE ĐẸP MẮT BẰNG CSS (Tiếp)

THIẾT KẾ TABLE ĐẸP MẮT BẰNG CSS (Tiếp)

Hỗ trợ trực tuyến

Hỗ trợ trực tuyến

⭐ Chia sẻ 10 công cụ kiểm tra Backlink đối thủ tốt nhất

⭐ THIẾT KẾ TABLE ĐẸP MẮT BẰNG CSS (Tiếp)

⭐ Domain – Tên miền là gì ? Định nghĩa ý nghĩa của domain ?

⭐ Thiết kế table đẹp mắt bằng CSS

⭐ Tạo modal popup bằng css

DỊCH VỤ THIẾT KẾ WEBSITE GIÁ RẺ

Liên hệ

Thiết Kế Website

Liên Kết

Đăng Ký Dịch Vụ

Xin Vui Lòng Điền Đầy Đủ Thông Tin