Question

我想将<div>元素放在HTML表格中，该表格在水平方向上部分跨越单元格，如下图所示。例如，左上角的红色元素跨越2015年，2016年和2017年单元格的1/4。下面的代码片段显示了限制在单元格中的元素，但是，我想知道在多个单元格中扩展它们的最佳方法是什么。

请注意，我只是在寻找HTML和CSS而不是JS。

<table border="1" cellpadding="3" cellspacing="0" style="width: 100%">
    <colgroup>
       <col span="1" style="width: 25%;">
       <col span="1" style="width: 25%;">
       <col span="1" style="width: 25%;">
       <col span="1" style="width: 25%;">
    </colgroup>
  <tr>
    <th>2015</th>
    <th>2016</th> 
    <th>2017</th>
    <th>2018</th>
  </tr>
  <tr>
    <td style="text-align: center;"><div style="background: red; border:1px solid black; padding: 2px;">valid for</div></td>
    <td></td> 
    <td></td>
    <td style="text-align: center;"><div style="background: red; border:1px solid black; padding: 2px;">valid for</divn></td>
  </tr>
  <tr>
    <td style="text-align: center;"><div style="background-color: blue; border:1px solid black; padding: 2px;">abc</div></td>
    <td></td> 
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td style="text-align: center;"><div style="background-color: green; border:1px solid black; padding: 2px;">i have a tooltip with mouse over</div></td>
    <td></td> 
    <td></td>
    <td></td>
  </tr>  
</table>

Answer 1

我建议仅将该表用于日历网格，并将所有“有效”字符放在相应行的第一个单元格中。给表格单元格（TD）的位置：相对样式和条形位置：绝对样式。现在计算并设置与日历相关的条形的左侧和宽度样式。

class ViewController: UIViewController {

@IBOutlet var usernameTextField: UITextField!
@IBOutlet var passwordTextField: UITextField!

func createAlert(title: String, message: String) {

    let alert = UIAlertController(title: title, message: message, preferredStyle: UIAlertControllerStyle.alert)

    alert.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in

        self.dismiss(animated: true, completion: nil)

    }))

    self.present(alert, animated: true, completion: nil)

}

@IBAction func signInPressed(_ sender: Any) {

    if usernameTextField.text == "" || passwordTextField.text == "" {

        createAlert(title: "Error in form", message: "Please enter an email and password.")

    } else {

        var activityIndicator = UIActivityIndicatorView()

        activityIndicator = UIActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
        activityIndicator.center = self.view.center
        activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.gray
        view.addSubview(activityIndicator)
        activityIndicator.startAnimating()
        UIApplication.shared.beginIgnoringInteractionEvents()

        PFUser.logInWithUsername(inBackground: usernameTextField.text!, password: passwordTextField.text!, block: { (user, error) in

            activityIndicator.stopAnimating()
            UIApplication.shared.endIgnoringInteractionEvents()

            if error != nil {

                var displayErrorMessage = "Please try again later."

                let error = error as NSError?

                if let errorMessage = error?.userInfo["error"] as? String {

                    displayErrorMessage = errorMessage

                }

                self.createAlert(title: "Sign in error", message: displayErrorMessage)


            } else {

                print("Logged in")

                self.performSegue(withIdentifier: "toSignIn", sender: self)

            }


        })

    }

}

override func viewDidAppear(_ animated: Bool) {


    if PFUser.current() != nil {

        performSegue(withIdentifier: "toSignIn", sender: self)

    }

    self.tabBarController?.tabBar.isHidden = true

}

override func viewDidLoad() {
    super.viewDidLoad()

}

Answer 2

当然，您可以相对于他们开始的年份的日历单元格添加条形。这看起来像这样：

<table>
  <tr>
    <td style="position: relative; width: 100px">
      <div style="position: absolute; left: 0px; width: 220px;">valid from</div>
    </td>
    <td style="width: 100px; position: relative"></td>
    <td style="width: 100px; position: relative">
      <div style="position: absolute; left: 80px; width: 120px;">valid from</div>
    </td>
  </tr>
</table>

如何在HTML表中创建部分跨越单元格的元素

2 个答案: