2012-02-25 85 views
5

Tôi có một bản lý lịch mà tôi đang cố gắng dịch từ MS Word sang HTML và CSS để bảo trì và chia sẻ dễ dàng hơn. Tôi thích phong cách của bản lý lịch, và muốn giữ nó. Nó có cột bên trái, với các tiêu đề như "Giáo dục", "Trải nghiệm", v.v. in đậm, và căn phải đối với dấu phân cách dọc.Loại bỏ khoảng cách giữa các đường viền dọc của bảng <td> s

Trong Word, điều này được thực hiện bằng một bảng, với kiểu đường viền trung tâm được đặt thành rắn và các đường viền khác được đặt thành trống. Điều này cho phép các tiêu đề phần được căn chỉnh theo chiều dọc với nội dung được liên kết.

Tôi đã cố gắng sao chép kỹ thuật này, nhưng trong Firefox và Chrome, nếu tôi đặt một cột thuộc tính border-right của tds thành solid, có khoảng trống ở các đơn vị dọc của bảng. Loại tàn tích này có hiệu lực.

Tôi đã nghĩ đến việc sử dụng hai div, một với tiêu đề và một với nội dung, nhưng khác với chiều cao pixel mã hóa cứng (có bộ vấn đề rõ ràng), tôi không thể biết cách giữ chúng theo chiều dọc trong đồng bộ.

Có cách nào để thực hiện việc này mà không làm mất khả năng giữ tiêu đề và nội dung được liên kết theo chiều dọc không?

mã bảng trông giống như

<table> 
<tr><td style="border-right:1px solid black;">Education</td><td> [Name of School, etc.]</td></tr> 
<tr><td style="border-right:1px solid black;">Experience</td><td>[Work experience]</td></tr> 
. 
. 
. 
</table> 

'

+1

Vui lòng giải thích ý của bạn là “khoảng trống ở các phần dọc của bảng” và vui lòng đăng một số mã. –

+0

Bạn có thể thêm ảnh chụp màn hình hoặc bất kỳ thứ gì để chúng tôi có thể thấy chính xác những gì bạn muốn không? –

+0

Bạn có thể vui lòng chia sẻ một số mã của những gì bạn đã thử cho đến nay và có lẽ là hình ảnh về những gì bạn đang cố gắng hoàn thành. Điều đó sẽ giúp ích rất nhiều. Bạn có thể chia sẻ mã với một [JSFiddle] (http://jsfiddle.net) chẳng hạn. –

Trả lời

17

Tôi muốn đi với:

table { border-collapse: collapse; } 

Nó sẽ loại bỏ các khoảng trống và cho phép biên giới bảng.

+0

điều này thực sự trả lời câu hỏi OP ... – mmcrae

5

Trên bàn, đặt border-spacing: 0; loại bỏ khoảng cách giữa các đường viền của các thành phần con TD.

+0

phao cứu sinh !, kiểu bảng lén lút –

+0

Sử dụng 'border-collapse: collapse;' để lại những khoảng trống nhỏ trong bảng của tôi, nhưng điều này đã loại bỏ chúng. Chính xác những gì tôi đang tìm kiếm! – Jez

0

Tại sao làm cho cuộc sống của bạn phức tạp khi bạn có thể làm như sau:

convert word tập tin vào một máy chủ pdf & nó sử dụng HTML embed hay object thẻ!

chỉnh sửa:http://jsfiddle.net/uday99/WzGeX/2/

+0

Một phần của vấn đề là tôi tiếp tục mất các tệp .docx của mình và buộc phải tạo lại chúng từ một tệp pdf không thể xuyên thủng. Ngoài ra, có khả năng khán giả của tôi sẽ không có plugin pdf trong trình duyệt của họ. Tôi chỉ muốn có một tập tin duy nhất, có thể chỉnh sửa được mà sau đó tôi có thể nhanh chóng đẩy tới một máy chủ, thay vì trải qua toàn bộ quá trình đó mỗi lần tôi nhận thấy lỗi đánh máy hoặc có được kinh nghiệm. –

+0

Xem ví dụ này: bạn muốn nói rằng bạn muốn một cái gì đó này? Http: //jsfiddle.net/uday99/WzGeX/2/ – uday

+0

Trên thực tế, http://jsfiddle.net/kFGmC/ gần như chính xác những gì tôi đã hy vọng. Tôi không nghĩ rằng để xử lý các thẻ '' làm các phần tử khối mà chúng đang có. –

5

Pha Chế với bảng là ý tưởng tốt hơn. Bạn có thể biến các tiêu đề thành các thành phần <h2> (hoặc bất kỳ mức nào của <h> là thích hợp) và để nó trôi nổi bên trái và cung cấp cho văn bản một lề trái đủ rộng.

Giống như this jsfiddle, hoặc đây không phải là điều bạn muốn?

+0

Tuyệt vời, cảm ơn bạn! Đã được nói với The Right Thing, nó luôn luôn có vẻ rất rõ ràng. –

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