html - Firefox 在第二页打印 colspan 边框

标签 html css firefox printing

我有一个长表,只能打印在 2 页上。该表的 thead 部分也有 colspans。打印表格时,上面有 colspan 的单元格缺少边框。

这可能是 Firefox 的错误,因为在 Chrome 中没有问题。但是我的客户使用 Firefox,所以我需要以某种方式解决这个问题。我会向 Mozilla 报告这个错误,但我不想等上几年他们才修复它。

您知道可以在这里使用的任何解决方法吗?

这是表格在 Firefox 中的呈现方式(实际上它有更多的行)

rendered in browser

但是当我打印它时,一些边框从第二页消失了。

printed

这里我放大到第二页:

zoom

这是我的示例代码:

<html>
<head>
    <style type="text/css">
        th, td{
            border-style: solid;
            border-width: 1px;
            border-color: black;
            padding: 5px;
        }

        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>

<table>

    <thead>
        <tr>
            <th colspan="2">00</th><th colspan="2">01</th><th colspan="2">02</th><th colspan="2">03</th><th colspan="2">04</th>
        </tr>
    </thead>
    <tbody>

    <tr>
        <td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td>
    </tr>

    <tr>
        <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td>
    </tr>

    <tr>
        <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
    </tr>

    <tr>
        <td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td><td>37</td><td>38</td><td>39</td>
    </tr>

    <tr>
        <td>40</td><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td><td>47</td><td>48</td><td>49</td>
    </tr>

    <tr>
        <td>50</td><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td><td>56</td><td>57</td><td>58</td><td>59</td>
    </tr>

    <tr>
        <td>60</td><td>61</td><td>62</td><td>63</td><td>64</td><td>65</td><td>66</td><td>67</td><td>68</td><td>69</td>
    </tr>

    <tr>
        <td>70</td><td>71</td><td>72</td><td>73</td><td>74</td><td>75</td><td>76</td><td>77</td><td>78</td><td>79</td>
    </tr>

    <tr>
        <td>80</td><td>81</td><td>82</td><td>83</td><td>84</td><td>85</td><td>86</td><td>87</td><td>88</td><td>89</td>
    </tr>

    <tr>
        <td>90</td><td>91</td><td>92</td><td>93</td><td>94</td><td>95</td><td>96</td><td>97</td><td>98</td><td>99</td>
    </tr>

        <tr>
        <td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td>
    </tr>

    <tr>
        <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td>
    </tr>

    <tr>
        <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
    </tr>

    <tr>
        <td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td><td>37</td><td>38</td><td>39</td>
    </tr>

    <tr>
        <td>40</td><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td><td>47</td><td>48</td><td>49</td>
    </tr>

    <tr>
        <td>50</td><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td><td>56</td><td>57</td><td>58</td><td>59</td>
    </tr>

    <tr>
        <td>60</td><td>61</td><td>62</td><td>63</td><td>64</td><td>65</td><td>66</td><td>67</td><td>68</td><td>69</td>
    </tr>

    <tr>
        <td>70</td><td>71</td><td>72</td><td>73</td><td>74</td><td>75</td><td>76</td><td>77</td><td>78</td><td>79</td>
    </tr>

    <tr>
        <td>80</td><td>81</td><td>82</td><td>83</td><td>84</td><td>85</td><td>86</td><td>87</td><td>88</td><td>89</td>
    </tr>

    <tr>
        <td>90</td><td>91</td><td>92</td><td>93</td><td>94</td><td>95</td><td>96</td><td>97</td><td>98</td><td>99</td>
    </tr>

        <tr>
        <td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td>
    </tr>

    <tr>
        <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td>
    </tr>

    <tr>
        <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
    </tr>

    <tr>
        <td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td><td>37</td><td>38</td><td>39</td>
    </tr>

    <tr>
        <td>40</td><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td><td>47</td><td>48</td><td>49</td>
    </tr>

    <tr>
        <td>50</td><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td><td>56</td><td>57</td><td>58</td><td>59</td>
    </tr>

    <tr>
        <td>60</td><td>61</td><td>62</td><td>63</td><td>64</td><td>65</td><td>66</td><td>67</td><td>68</td><td>69</td>
    </tr>

    <tr>
        <td>70</td><td>71</td><td>72</td><td>73</td><td>74</td><td>75</td><td>76</td><td>77</td><td>78</td><td>79</td>
    </tr>

    <tr>
        <td>80</td><td>81</td><td>82</td><td>83</td><td>84</td><td>85</td><td>86</td><td>87</td><td>88</td><td>89</td>
    </tr>

    <tr>
        <td>90</td><td>91</td><td>92</td><td>93</td><td>94</td><td>95</td><td>96</td><td>97</td><td>98</td><td>99</td>
    </tr>

        <tr>
        <td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td>
    </tr>

    <tr>
        <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td>
    </tr>

    <tr>
        <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
    </tr>

    <tr>
        <td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td><td>37</td><td>38</td><td>39</td>
    </tr>

    <tr>
        <td>40</td><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td><td>47</td><td>48</td><td>49</td>
    </tr>

    <tr>
        <td>50</td><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td><td>56</td><td>57</td><td>58</td><td>59</td>
    </tr>

    <tr>
        <td>60</td><td>61</td><td>62</td><td>63</td><td>64</td><td>65</td><td>66</td><td>67</td><td>68</td><td>69</td>
    </tr>

    <tr>
        <td>70</td><td>71</td><td>72</td><td>73</td><td>74</td><td>75</td><td>76</td><td>77</td><td>78</td><td>79</td>
    </tr>

    <tr>
        <td>80</td><td>81</td><td>82</td><td>83</td><td>84</td><td>85</td><td>86</td><td>87</td><td>88</td><td>89</td>
    </tr>

    <tr>
        <td>90</td><td>91</td><td>92</td><td>93</td><td>94</td><td>95</td><td>96</td><td>97</td><td>98</td><td>99</td>
    </tr>


    </tbody>
</table>

</body>
</html>

最佳答案

这是我所做的:

我用一个 div 包裹了每个第二个单元格的内容。

然后我将 div 的大小扩展到单元格的大小。然后我改用 div 的 border-left 属性。

CSS(较少):

tbody tr>td:nth-of-type(even){
    padding: 0 !important;
    &>div{
        padding: 2px;
        position: relative;
        width: 100%;
        height: 100%;
        margin-left: -1px;
        border-left-style: solid;
        border-left-width: 1px;
        border-left-color: black;
    }
}

关于html - Firefox 在第二页打印 colspan 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32416980/

相关文章:

html - 表单上留下的边距会在右侧创建一个额外的空白区域

javascript - 为什么该站点没有使用 Google map 的 Google Logo ?我想做这个。如何?

firefox - 源代码未在Firefox的CKEditor中包装

javascript - 无需用户干预,在 chrome 或 firefox 扩展中使用 Javascript 上传文件

html - CSS 内容属性 : is it possible to insert HTML instead of Text?

php - MySQL JOIN 在 PHP 中为多个 HTML 表排列结果

html - 如何扩展div?

html - 所有浏览器都支持 CSS 断字吗?

php - 使用 dompdf 打印 pdf 表格无法正常工作

html - 为什么我在 Godaddy 中的大图片无法显示?