Question

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

它可能是一个Firefox错误，因为在Chrome中没有问题。但我的客户使用Firefox，所以我需要以某种方式解决这个问题。我将此错误报告给Mozilla，但我不想等到几年才能修复它。

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

这是表在Firefox中呈现的方式（它实际上有更多的行）

但是当我打印它时，某些边框会从第二页消失。

我在这里放大了第二页：

这是我的示例代码：

<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>

Answer 1

这就是我所做的：

我用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;
    }
}

Firefox在第二页上打印colspan边框

1 个答案: