@react-pdf/rendererでテーブル上に線を引く

const Quixote = () => (
<Document>
    <Page style={styles.body}>
   <View style={{ flexDirection: 'column' }}>  
    {/* テーブル行 */}  
    <View style={{ flexDirection: 'row', borderBottom: '1px solid #ccc' }}>  
      {/* 1列目 */}  
      <View style={{   
        width: '33.33%',   
        padding: 10,   
        borderRight: '1px solid #ccc',  
        height: 60   
      }}>  
        <Text>Cell 1</Text>  
      </View>  
        
      {/* 2列目 - 相対位置指定 */}  
      <View style={{   
        width: '33.33%',   
        padding: 10,   
        borderRight: '1px solid #ccc',  
        position: 'relative',  
        height: 60   
      }}>  
        <Text>Cell 2</Text>  
          
        {/* 2,3列目に渡る線 */}  
        <Svg   
          style={{   
            position: 'absolute',  
            top: 30,  // セルの高さ中央（60px / 2）  
            left: 0,  
            width: '200%',  // 2列分の幅  
            height: 2  
          }}  
          viewBox="0 0 200 1"  
        >  
          <Line   
            x1="0"   
            y1="1"   
            x2="200"   
            y2="1"   
            stroke="#ff0000"   
            strokeWidth="2"  
          />  
        </Svg>  
      </View>  
        
      {/* 3列目 */}  
      <View style={{   
        width: '33.33%',   
        padding: 10,  
        height: 60   
      }}>  
        <Text>Cell 3</Text>  
      </View>  
    </View>  
  </View>
    </Page>
  </Document>
);

Font.register({
  family: 'Oswald',
  src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf'
});

const styles = StyleSheet.create({
  body: {
    paddingTop: 35,
    paddingBottom: 65,
    paddingHorizontal: 35,
  },
  title: {
    fontSize: 24,
    textAlign: 'center',
    fontFamily: 'Oswald'
  },
  author: {
    fontSize: 12,
    textAlign: 'center',
    marginBottom: 40,
  },
  subtitle: {
    fontSize: 18,
    margin: 12,
    fontFamily: 'Oswald'
  },
  text: {
    margin: 12,
    fontSize: 14,
    textAlign: 'justify',
    fontFamily: 'Times-Roman'
  },
  image: {
    marginVertical: 15,
    marginHorizontal: 100,
  },
  header: {
    fontSize: 12,
    marginBottom: 20,
    textAlign: 'center',
    color: 'grey',
  },
  pageNumber: {
    position: 'absolute',
    fontSize: 12,
    bottom: 30,
    left: 0,
    right: 0,
    textAlign: 'center',
    color: 'grey',
  },
});

ReactPDF.render(<Quixote />);