Eu tenho uma tabela longa que pode ser impressa apenas em 2 páginas. A tabela também possui colunas na seção thead. Ao imprimir a tabela, as bordas estão ausentes nas células em que havia um colspan acima.
Provavelmente é um bug do Firefox, já que no Chromenão há problema. Mas como meu cliente usa o Firefox, preciso resolver esse problema de alguma forma. Vou relatar esse bug ao Mozilla, mas não gostaria de esperar anos até que eles o corrigissem.
Você conhece alguma solução alternativa que possa ser usada aqui?
É assim que a tabela é renderizada no Firefox (ela tem muito mais linhas na realidade)
Mas quando imprimo, algumas bordas desaparecem da segunda página.
Aqui eu ampliei a segunda página:
Aqui está o meu código de exemplo:
<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>
Respostas:
0 para resposta № 1Aqui está o que eu fiz:
Embrulhei o conteúdo de cada segunda célula com uma div.
Depois, expandi o tamanho da div para o tamanho da célula. Em seguida, usei a propriedade border-left da div.
CSS (menos):
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;
}
}