Hàng bảng ngắt trang in CSS Chrome

Tôi có dữ liệu với bảng html. Mã này hoạt động tốt với firefox. nhưng ngắt trang và số trang không hoạt động trong chrome. tôi cũng cần tránh URL trang

Tôi cần làm việc với chrome

Trình duyệt Chrome. Phiên bản 50. 0. 2661. 75 mét

firefox. 45. 0. 1

Không có thuộc tính

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

0 thực sự trong CSS. Nó thực sự là một bộ gồm 3 thuộc tính.

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

1,

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

2 và

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

3. Các thuộc tính này giúp xác định cách thức hoạt động của tài liệu khi được in. Ví dụ: để làm cho tài liệu in giống sách hơn

Đặc tính

ngắt trang trước

Thuộc tính

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

1 thêm dấu ngắt trang trước phần tử mà nó được áp dụng

Ghi chú. thuộc tính này đang được thay thế bằng thuộc tính chung hơn

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

5. Thuộc tính mới này cũng xử lý ngắt cột và vùng trong khi tương thích về mặt cú pháp với

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

1. Vì vậy, trước khi sử dụng

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

1, hãy kiểm tra xem bạn có thể sử dụng

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

5 thay thế không

Một trường hợp sử dụng phổ biến cho điều này là áp dụng nó cho bộ chọn

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

1 để người dùng in một trang có nhận xét có thể dễ dàng chọn in toàn bộ tài liệu nhưng dừng lại trước khi nhận xét rõ ràng

ngắt trang sau

Thuộc tính

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

2 thêm dấu ngắt trang sau phần tử mà nó được áp dụng

Ghi chú. thuộc tính này đang được thay thế bằng thuộc tính chung chung hơn

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

3. Thuộc tính mới này cũng xử lý ngắt cột và ngắt vùng đồng thời tương thích về mặt cú pháp với

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

2. Vì vậy, trước khi sử dụng

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

2, hãy kiểm tra xem bạn có thể sử dụng

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

3 thay thế không

phá trang

Thuộc tính

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

3 thêm ngắt trang bên trong phần tử mà nó được áp dụng

cú pháp

page-break-after  : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid

Các giá trị

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

8 và

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

9 cho

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

1 và

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

2 đề cập đến bố cục trải rộng (như một cuốn sách) trong đó có các trang bên trái và bên phải riêng biệt. Họ làm việc như thế này

• @media print {
    h2 { 
      page-break-before: always;
    }
    h3, h4 {
      page-break-after: avoid;
    }
    pre, blockquote {
      page-break-inside: avoid;
    }
  }

  8 buộc một hoặc hai ngắt trang sau phần tử để trang tiếp theo được định dạng là trang bên trái

• @media print {
    h2 { 
      page-break-before: always;
    }
    h3, h4 {
      page-break-after: avoid;
    }
    pre, blockquote {
      page-break-inside: avoid;
    }
  }

  9 buộc một hoặc hai ngắt trang sau phần tử để trang tiếp theo được định dạng là trang bên phải

Hãy coi

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

04 là sự kết hợp của cả hai. Thông số kỹ thuật nói

Tác nhân người dùng tuân thủ có thể hiểu các giá trị 'trái' và 'phải' là 'luôn luôn'

Thí dụ

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

Đoạn mã này thực hiện 3 việc

• nó buộc ngắt trang trước tất cả các tiêu đề

  @media print {
    h2 { 
      page-break-before: always;
    }
    h3, h4 {
      page-break-after: avoid;
    }
    pre, blockquote {
      page-break-inside: avoid;
    }
  }

  05 (có lẽ thẻ h2 trong tài liệu của bạn là tiêu đề chương xứng đáng có một trang mới)
• nó ngăn ngắt trang ngay sau các tiêu đề phụ vì điều đó có vẻ kỳ quặc
• nó ngăn ngắt trang bên trong thẻ

  @media print {
    h2 { 
      page-break-before: always;
    }
    h3, h4 {
      page-break-after: avoid;
    }
    pre, blockquote {
      page-break-inside: avoid;
    }
  }

  06 và dấu ngoặc kép cấp khối

thuộc tính liên quan

• @trang
• phá vỡ sau
• phá vỡ trước
• trẻ mồ côi
• góa phụ

Các nguồn lực khác

• thuộc tính liên quan đến trang trong thông số kỹ thuật CSS
• ngắt trước và ngắt trang trước tại MDN
• ngắt sau và ngắt trang sau tại MDN
• đột nhập trang tại MDN

Hỗ trợ trình duyệt

ChromeSafariFirefoxOperaIEAndroidiOSAnyAnyAny7+4+TBDTBD

Bạn có thể in từ thiết bị di động, như AirPrint trên iOS, nhưng chúng tôi chưa thử nghiệm điều này nhiều. Nếu bất cứ ai có dữ liệu về hỗ trợ, hãy cho chúng tôi biết