Tại sao màu viền của ô bảng html không thay đổi?

Làm cách nào để tạo đường viền trái của ô màu đỏ? Tại sao điều này không hoạt động? Cảm ơn!!Tại sao màu viền của ô bảng html không thay đổi?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
.main-table { 
    border-collapse: collapse; 
} 
.main-table td { 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid #aaa; 
    padding: 1px 4px 1px 4px; 
} 
.left-border { 
border-left: 1px solid red !important; 
} 
</style> 
</head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body>

Không được lề trái để ghi đè màu được chỉ định trên .main-table td?

<table class='main-table' cellspacing='0' cellpadding='0'> 
<tr> 
    <td> 1 </td> 
    <td> 366 </td> 
</tr> 
<tr> 
    <td > 2 </td> 
    <td class='left-border'> 777 </td> 
</tr> 
</table> 

</body> 
</html>

Nguồn

2012-01-18 vrepsys

Đặt đường viền thành 1px double red. Đường viền "gấp đôi" rộng 1px trông giống với một chữ "rắn", nhưng có ưu tiên cao hơn trong tính toán đường biên bị thu hẹp.

Nguồn

2012-01-18 07:06:51

Để tham khảo, các quy tắc giải quyết xung đột biên giới trong CSS2.1 là [ở đây] (http://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution). –

Tính năng này hoạt động. Tuyệt vời, cảm ơn vì liên kết! – vrepsys

Nếu bạn hài lòng với câu trả lời trên StackOverflow, vui lòng Chấp nhận nó bằng cách đánh dấu dấu kiểm dưới điểm số phiếu bầu. –

Hãy thử điều này,

.main-table { 
    border-collapse: collapse; 
} 
.left-border { 
border-left: 2px solid red !important; 
}

Nguồn

2012-01-18 07:03:23 anglimasS

Không làm những gì câu hỏi yêu cầu. –

nó không hoạt động ... –

@ Mr.T.K - Bây giờ kiểm tra nanba ... – anglimasS

-1

Giá trị collapse nghĩa biên giới đang sụp đổ thành một biên giới duy nhất khi có thể. Bạn muốn sử dụng separate cho thuộc tính border-collapse.

Ngoài ra, bạn có hai thẻ đóng </head>.

Nguồn

2012-01-18 07:04:38 styfle

Không làm những gì câu hỏi yêu cầu. –

@Kolink: Tại sao chúng ta không để người hỏi câu hỏi quyết định? – styfle

Bởi vì bạn nên cố gắng giữ cho những gì họ yêu cầu, trừ khi không có thay thế?Tôi biết rằng khi tôi sử dụng 'border-collapse: collapse' tôi làm điều đó vì một lý do nào đó, và lý do đó là ghi đè lên' riêng biệt 'mặc định để tạo ra hiệu ứng của sự lựa chọn của tôi. –

một giải pháp khác,

http://jsfiddle.net/yPSVg/

Nguồn

2012-01-18 07:09:22

Trong CSS chọn đó là cụ thể nhất được ưu tiên hơn những người cụ thể ít hơn. Ví dụ: trong trường hợp của bạn, .main-table td được ưu tiên hơn .left-border vì trước đây cụ thể hơn. Để giải quyết, bạn có thể chỉ định: .main-table td.left-border để ghi đè biên giới. Điều này là chính xác hơn và tốt hơn sử dụng !important giúp loại bỏ mọi cơ hội ghi đè thêm.

Xem liên kết này để biết về ưu tiên chọn CSS: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Nguồn

2012-01-18 07:09:30 techfoobar

Sự phá vỡ '! Quan trọng 'vấn đề này, mặc dù tôi cho rằng tốt hơn nên sử dụng tính đặc hiệu hơn là dựa vào'! Quan trọng' –

tôi sẽ đi với anglimass, nhưng với một sự thay đổi cho css:

td.left-border { 
border-left: 1px double red !important; 
}

Đó là, bộ chọn nên có bổ sung " td "

(Đã chỉnh sửa đường viền 2px thành 1px - đó là lỗi!)

Nguồn

2012-01-18 07:19:54 BilalKat

Nó đang thay đổi để tăng gấp đôi những gì hữu ích. Đặt chiều rộng đường viền thành 2px giúp thay đổi màu sắc ngay cả khi đồng nhất. Tuy nhiên, những gì tôi cần là biên giới 1px. Dù sao cũng cảm ơn bạn – vrepsys

Hmmm. Nó gần như có vẻ như thế này phụ thuộc vào thứ tự mà biên giới ô được rút ra bởi trình duyệt. Tôi đã thử ở trên trong IE8 và nó trông tốt, nhưng không làm việc trong FF hoặc Chrome.

Sau đó, tôi đã thử tạo đường viền bên phải của ô màu đỏ bên trái thay vì sử dụng cùng một đánh dấu giống nhau. Lần này nó không hoạt động trong IE nhưng đã làm việc trong FF và Chrome.

Nếu bạn tạo cả viền trái của ô phải màu đỏ và đường viền bên phải của ô màu đỏ bên trái, nó hoạt động trong tất cả các ô đó.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
.main-table 
{ 
    border-collapse: collapse; 
} 
.main-table td 
{ 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid #aaa; 
    padding: 1px 4px 1px 4px; 
} 
.right-border 
{ 
    border-right: 1px solid red !important; 
} 
.left-border 
{ 
    border-left: 1px solid red !important; 
} 
</style> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <table class='main-table' cellspacing='0' cellpadding='0'> 
     <tr> 
      <td> 1 </td> 
      <td> 366 </td> 
     </tr> 
     <tr> 
      <td class='right-border'> 2 </td> 
      <td class='left-border'> 777 </td> 
     </tr> 
    </table> 
</body> 
</html>

Nguồn

2012-01-18 07:35:28

Tại sao màu viền của ô bảng html không thay đổi?

Trả lời

Các vấn đề liên quan