填寫表格是我們日常工作和學習中經常會涉及到的任務,如果能夠在表格的樣式上下點功夫,讓它看起來更加美觀和整潔,就能夠顯得更加專業。以下是一些可供參考的填寫表格CSS樣式。
/* 表格樣式 */ table { border-collapse: collapse; width: 100%; max-width: 100%; margin-bottom: 1rem; background-color: #fff; border-radius: 0.25rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } table td, table th { padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; } table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; } /* 表單樣式 */ .form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0.25rem rgba(0, 123, 255, 0.25); }
其中,表格樣式中設置了表格的寬度、背景色、邊框和圓角等樣式,表格單元格的樣式設置了文本的垂直對齊方式和邊框樣式。表單樣式則定義了輸入框的樣式,并在焦點狀態下設置了邊框和陰影以顯示高亮效果。
通過合理地應用這些CSS樣式,我們可以輕松地制作出美觀、整潔的填寫表格。
上一篇好看的圖片邊框CSS
下一篇MySQL業務表是什么表