javascript - 为什么 Chrome 中的表格截断而不是 Internet Explorer？

问题描述

我目前正在学习一个教程，以了解如何创建仪表板来跟踪加密货币价格。但是，我遇到了一个问题，即当我在 chrome 上运行网页时，我的表格顶部被切断，而网页顶部应该在网页顶部看起来像这样，运行时可以看到在 IE 上。当我在 Chrome 中禁用 javascript 时，我会得到类似. 该程序的后端使用 next.js、coingecko API 来获取价格和引导格式化。我将不胜感激任何有助于推动我找到解决方案的提示。我在下面附上了相关的代码和资源。

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import CoinGecko from 'coingecko-api';
const coinGeckoClient = new CoinGecko();

export default function Home(props) {
  const { data } = props.result;

  const formatPercent = number => 
    `${new Number(number).toFixed(2)}%`

  const formatDollar = (number, maximumSignificantDigits) =>
    new Intl.NumberFormat(
      'en-US', 
      { 
        style: 'currency', 
        currency: 'USD',
        maximumSignificantDigits
      })
      .format(number);

  return (
    <div className={styles.container}>
      <Head>
        <title>Coinmarketcap clone</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <h1>Coinmarketcap clone</h1>

      <table className="table">
        <thead>
          <tr>
            <th>Symbol</th>
            <th>24H Change</th>
            <th>Price</th>
            <th>Market cap</th>
          </tr>
        </thead>
        <tbody>
          {data.map(coin => (
            <tr key={coin.id}>
              <td>
                <img 
                  src={coin.image} 
                  style={{width: 25, height: 25, marginRight: 10}} 
                />
                {coin.symbol.toUpperCase()}
              </td>
              <td> 
                <span
                  className={coin.price_change_percentage_24h > 0 ? (
                    'text-success' 
                  ) : 'text-danger'}
                >
                {formatPercent(coin.price_change_percentage_24h)}
                </span>
              </td>
              <td>{formatDollar(coin.current_price, 20)}</td>
              <td>{formatDollar(coin.market_cap, 12)}</td>
            </tr>
          ))}
        </tbody>
      </table>

    </div>
  )
}

标签： javascriptapigoogle-chromebootstrap-4next.js

javascript - 为什么 Chrome 中的表格截断而不是 Internet Explorer？

问题描述

解决方案

推荐阅读